Docs / Generate an Angular page from the command line

Generate an Angular page from the command line

easy-mat-ui add-page writes an Angular page for you from the components of the library and a data table. It generates the component, the template, the table configuration and the models. It never installs anything.

Run it

npx easy-mat-ui add-page                       # asks what it needs, with a menu by category
npx easy-mat-ui add-page --name stock-items --blocks page-header,stat,table --dry-run --print

Run it at the root of an Angular project. --dry-run shows what would be written and writes nothing.

What it writes

A standalone component and its template: each component you chose is already wired to the data it needs.
A table configuration file (columns, dialog fields and the table) when you chose the data table, with an optional child table opened under each row.
The models that do not exist yet, with example rows, so the page shows data as soon as it is generated.
With translation keys, the entries for your English translation file. Only keys that are missing are added.

Components you can choose

Page header
Key figures
Category buttons
Segmented control
Language picker
Card grid
Data table, with an optional child table

Models

If your project has a model file that matches the page name (stock-items finds stock-item.model.ts), the command reads its class and reuses it: text, number, boolean and date properties become columns, and the others are left out with a message. Otherwise it generates a generic model with the properties item1, item2 and item3, plus an icon column and an actions column, ready to rename.

Translation keys or plain texts

If @ngx-translate/core is installed, the generated code reads its texts through translation keys and the command adds them to your English file. If you prefer, or if it is not installed, the texts are written in the code and no translation library is needed. Force either choice with --i18n or --no-i18n.

Options

Option	Meaning
--name	Name of the page in kebab-case
--dir	Destination folder (default src/app/pages)
--blocks	Components, separated by commas: page-header, stat, chip-nav, segmented, language-switch, card-grid, table
--table-model	Model of the table: a name, a path, or generic
--child, --child-model	Add a second table opened under a row
--i18n, --no-i18n	Translation keys or plain texts
--config	Read a complete description of the page from a JSON file
--dry-run, --print	Show what would be written, and the files

Prefer a screen

The page builder of the live demo does the same with a preview: choose the components, set them up, copy the code, or download a description that --config reads.

Open the live demo or read the source on GitHub.