Getting Started with Ignite UI for Angular Schematics

    To get started install Ignite UI for Angular Schematics globally:

    npm i -g @igniteui/angular-schematics

    The above install will make the schematics available to use a collection parameter for the ng new command.

    If you are using yarn package manager:

    yarn global add @igniteui/angular-schematics

    Using guided experience

    The shortest and easiest way to bootstrap an application is to use the step by step guide using Ignite UI for Angular Schematics.

    To activate the guide using the Ignite UI for Angular Schematics run:

    ng new --collection="@igniteui/angular-schematics"

    Create a new project

    To create an application that is configured to use the Ignite UI for Angular controls, run the ng new command providing @igniteui/angular-schematics to the collection option.

    ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav

    Additionally, by setting the type of the project, like so --type=igx-ts-legacy, you can specify that you prefer your project to be generated using module based bootstrapping. Not specifying it will default to a project that uses standalone components.

    If you already have an Angular project, created without providing the @igniteui/angular-schematics collection as described above, you can add the Ignite UI for Angular product, using the following command:

    ng add igniteui-angular

    The new application is created in a directory with the same name (newAngularProject). There are several project templates from which you can choose when creating an Ignite UI for Angular application:

    template id template description
    empty Project structure with routing and a home page
    side-nav Project structure with side navigation drawer
    side-nav-auth Side navigation project extended with user authentication module.
    Angular Authentication Project Template topic covers the project template in detail.

    Additionally, you can specify arguments to control the theme or skip packages install:

    name

    name (alias: -n)

    The name of the application. The application is created inside a directory with the same name.

    framework (Ignite UI CLI only)

    --framework (alias: -f) default value: "jquery"

    Framework to setup project for. The supported frameworks are jQuery, Angular and React.

    type (Ignite UI CLI only)

    --type (alias: -t)

    The available project types depend on the selected framework.

    theme

    --theme (alias: -th)

    Project theme (depends on project type).

    skip-git

    --skip-git (alias: --sg)

    When this option is used, the automatic repository initialization with Git will be skipped. If the option is omitted, then the global skip-git configuration property is used.

    skip-install

    --skip-install (alias: --si)

    The new command will install package dependencies on project creation. Passing this flag will skip the initial installation.

    template

    --template

    Use this option if there are different project templates for a specific framework type. Currently this option is available only for Ignite UI for Angular igx-ts project types.

    Add template

    To add one of the available Ignite UI Angular templates you need to provide template ID and a name for the new component or use the Step-by-Step Guide. Their usage is supported only inside existing projects created with the Angular Schematics, Ignite UI CLI or where Ignite UI for Angular has been installed using ng add.

    With Schematics, use ng generate with the Ignite UI for Angular collection and component [template] [name]:

    ng g @igniteui/angular-schematics:component grid newGrid

    List of all the available templates.

    Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route:

    module

    --module (alias: -m)

    note: module argument is applicable only in Angular projects.

    Path to the module.ts file, relative to the /src/app/ folder, for the module where the new component should be registered:

    ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts
    skip-route

    --skip-route (alias: -srk)

    Don't auto-generate an app navigation route for the new component

    Run the application

    The start schematic will build the application, start a web server and open it in your default browser.

    ng g @igniteui/angular-schematics:start