Using Standalone Components with Ignite UI for Angular
Angular 14 introduced the concept of standalone components which allows for a simplified way of building applications by reducing the need for using NgModules
. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as standalone
with version 16.0.0
. All the existing NgModules
are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the standalone
components.
How to use the new standalone components
Starting with Angular 16 and Ignite UI for Angular 16.0 you can now simply add the imports that your standalone
component needs in the imports
property. In the following example IGX_GRID_DIRECTIVES
can be used to import all grid related components and directives.
import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
@Component({
selector: 'app-grid-sample',
styleUrls: ['grid.sample.scss'],
templateUrl: 'grid.sample.html',
standalone: true,
imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
})
But you can also import all components used by your standalone
component individually. Example with the IgxGridComponent
and IgxColumnComponent
when only these two are used by another component is as follows.
import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';
@Component({
selector: 'app-grid-sample',
styleUrls: ['grid.sample.scss'],
templateUrl: 'grid.sample.html',
standalone: true,
imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe]
})
In addition, as all existing modules are preserved but now only import and export the standalone components, you can also use them for your standalone component.
// `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
import { IgxGridModule } from 'igniteui-angular';
@Component({
selector: 'app-grid-sample',
styleUrls: ['grid.sample.scss'],
templateUrl: 'grid.sample.html',
standalone: true,
imports: [IgxGridModule, AsyncPipe]
})
Utility Directives
The IGX_GRID_DIRECTIVES
shown in the previous examples is a utility directive that exports all grid related components and directives. The following table lists all new utility directives that are available in Ignite UI for Angular.
Directive Collection | Description |
---|---|
IGX_ACCORDION_DIRECTIVES |
Exports all accordion related components and directives. |
IGX_ACTION_STRIP_DIRECTIVES |
Exports all action strip related components and directives. |
IGX_BANNER_DIRECTIVES |
Exports all banner related components and directives. |
IGX_BOTTOM_NAV_DIRECTIVES |
Exports all bottom navigation related components and directives. |
IGX_BUTTON_GROUP_DIRECTIVES |
Exports all button group related components and directives. |
IGX_CALENDAR_DIRECTIVES |
Exports all calendar related components and directives. |
IGX_CARD_DIRECTIVES |
Exports all card related components and directives. |
IGX_CAROUSEL_DIRECTIVES |
Exports all carousel related components and directives. |
IGX_CHIPS_DIRECTIVES |
Exports all chip related components and directives. |
IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES |
Exports all circular progress bar related components and directives. |
IGX_COMBO_DIRECTIVES |
Exports all combo related components and directives. |
IGX_DATE_PICKER_DIRECTIVES |
Exports all date-picker related components and directives. |
IGX_DATE_RANGE_PICKER_DIRECTIVES |
Exports all date-range picker related components and directives. |
IGX_DIALOG_DIRECTIVES |
Exports all dialog related components and directives. |
IGX_DRAG_DROP_DIRECTIVES |
Exports all drag and drop related components and directives. |
IGX_DROP_DOWN_DIRECTIVES |
Exports all drop-down related components and directives. |
IGX_EXPANSION_PANEL_DIRECTIVES |
Exports all expansion panel related components and directives. |
IGX_GRID_DIRECTIVES |
Exports all grid related components and directives. |
IGX_HIERARCHICAL_GRID_DIRECTIVES |
Exports all hierarchical grid related components and directives. |
IGX_INPUT_GROUP_DIRECTIVES |
Exports all input group related components and directives. |
IGX_LINEAR_PROGRESS_BAR_DIRECTIVES |
Exports all linear progress bar related components and directives. |
IGX_LIST_DIRECTIVES |
Exports all list related components and directives. |
IGX_NAVBAR_DIRECTIVES |
Exports all navbar related components and directives. |
IGX_NAVIGATION_DRAWER_DIRECTIVES |
Exports all navigation drawer related components and directives. |
IGX_PAGINATOR_DIRECTIVES |
Exports all paginator related components and directives. |
IGX_PIVOT_GRID_DIRECTIVES |
Exports all pivot grid related components and directives. |
IGX_PROGRESS_BAR_DIRECTIVES |
Exports all linear and circular progress bar related components and directives. |
IGX_QUERY_BUILDER_DIRECTIVES |
Exports all query builder related components and directives. |
IGX_RADIO_GROUP_DIRECTIVES |
Exports all radio group related components and directives. |
IGX_SELECT_DIRECTIVES |
Exports all select related components and directives. |
IGX_SIMPLE_COMBO_DIRECTIVES |
Exports all simple combo related components and directives. |
IGX_SLIDER_DIRECTIVES |
Exports all slider related components and directives. |
IGX_SPLITTER_DIRECTIVES |
Exports all splitter related components and directives. |
IGX_STEPPER_DIRECTIVES |
Exports all stepper related components and directives. |
IGX_TABS_DIRECTIVES |
Exports all tabs related components and directives. |
IGX_TIME_PICKER_DIRECTIVES |
Exports all time picker related components and directives. |
IGX_TOOLTIP_DIRECTIVES |
Exports all tooltip related components and directives. |
IGX_TREE_DIRECTIVES |
Exports all tree-view related components and directives. |
IGX_TREE_GRID_DIRECTIVES |
Exports all tree grid related components and directives. |
Additional Resources
Related topics:
Our community is active and always welcoming to new ideas.