This package is part of our private npm feed hosted on https://packages.infragistics.com/npm/js-licensed/. If you are building a commercial product or your license has expired, you will need to acquire a commercial license. There you will find the latest versions of the Ignite UI for Angular packages.
Use our public repository for questions, issues and feature requests.
Create a project from scratch
- Execute the following commands
npm i -g @igniteui/angular-schematics
ng new <project name> --collection="@igniteui/angular-schematics" --template=<template id>
cd <project name>
ng g @igniteui/angular-schematics:component grid <component name>
npm install igniteui-angular-extras
Note: If your app needs to be updated from trial to licensed package, check out our official guide on the subject. Use ng g @igniteui/angular-schematics:upgrade-packages
.
- After the package is installed go ahead and:
Updated Usage
Before Version 19.x
In versions prior to 19.x, Ignite UI for Angular Extras required adding the IgxExtrasModule
to your app.module.ts
to enable components and directives. After installing the package, you would include the module in your app.module.ts
as follows:
- Add the
IgxExtrasModule
to your app.module.ts - Apply
igxChartIntegration
, igxConditionalFormatting
, igxContextMenu
directives to your grid:
import { IgxExtrasModule } from 'igniteui-angular-extras';
@NgModule({
declarations: [ ... ],
imports: [ IgxExtrasModule, ... ],
bootstrap: [ ... ]
})
export class AppModule { }
<igx-grid #grid1 igxChartIntegration igxConditionalFormatting igxContextMenu
[autoGenerate]="true" [paging]="true" [data]="localData" >
</igx-grid>
After Version 19.x
Since version 19.x, Ignite UI for Angular Extras has adopted standalone components and directives, removing the need to add IgxExtrasModule
to your app.module.ts
. You can now directly import the required components and directives as standalone elements.
import { PageHeaderComponent } from 'igniteui-angular-extras';
import { IgxChartIntegrationDirective } from 'igniteui-angular-extras';
import { IgxConditionalFormattingDirective } from 'igniteui-angular-extras';
import { IgxContextMenuDirective } from 'igniteui-angular-extras';
<igx-grid #grid1 igxChartIntegration igxConditionalFormatting igxContextMenu
[autoGenerate]="true" [paging]="true" [data]="localData" >
</igx-grid>
- Execute
npm run start
Build
Execute npm run build:lib
to build the project. The build artifacts will be stored in the dist/
directory. By default it builds the project with --prod
flag for a production build.
In order to run the project with a small sample, execute npm run start