Uso de componentes independientes con 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. As of Angular 19 all components are standalone by default. 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',
    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',
    imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe]
})

    Además, como todos los módulos existentes se conservan pero ahora solo importan y exportan los componentes independientes, también puede usarlos para su componente independiente.

    // `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',
    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.

    Colección directiva Descripción
    IGX_ACCORDION_DIRECTIVES Exporta todos los componentes y directivas relacionados con el acordeón.
    IGX_ACTION_STRIP_DIRECTIVES Exporta todos los componentes y directivas relacionados con la tira de acción.
    IGX_BANNER_DIRECTIVES Exporta todos los componentes y directivas relacionados con banners.
    IGX_BOTTOM_NAV_DIRECTIVES Exporta todos los componentes y directivas relacionados con la navegación inferior.
    IGX_BUTTON_GROUP_DIRECTIVES Exporta todos los componentes y directivas relacionados con el grupo de botones.
    IGX_CALENDAR_DIRECTIVES Exporta todos los componentes y directivas relacionados con el calendario.
    IGX_CARD_DIRECTIVES Exporta todos los componentes y directivas relacionados con la tarjeta.
    IGX_CAROUSEL_DIRECTIVES Exporta todos los componentes y directivas relacionados con el carrusel.
    IGX_CHIPS_DIRECTIVES Exporta todos los componentes y directivas relacionados con chips.
    IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES Exporta todos los componentes y directivas relacionados con la barra de progreso circular.
    IGX_COMBO_DIRECTIVES Exporta todos los componentes y directivas relacionados con el combo.
    IGX_DATE_PICKER_DIRECTIVES Exporta todos los componentes y directivas relacionados con el selector de fechas.
    IGX_DATE_RANGE_PICKER_DIRECTIVES Exporta todos los componentes y directivas relacionados con el selector de rango de fechas.
    IGX_DIALOG_DIRECTIVES Exporta todos los componentes y directivas relacionados con el diálogo.
    IGX_DRAG_DROP_DIRECTIVES Exporta todos los componentes y directivas relacionados con arrastrar y soltar.
    IGX_DROP_DOWN_DIRECTIVES Exporta todos los componentes y directivas relacionados con el menú desplegable.
    IGX_EXPANSION_PANEL_DIRECTIVES Exporta todos los componentes y directivas relacionados con el panel de expansión.
    IGX_GRID_DIRECTIVES Exporta todos los componentes y directivas relacionados con la red.
    IGX_HIERARCHICAL_GRID_DIRECTIVES Exporta todos los componentes y directivas relacionados con la cuadrícula jerárquica.
    IGX_INPUT_GROUP_DIRECTIVES Exporta todos los componentes y directivas relacionados con el grupo de entrada.
    IGX_LINEAR_PROGRESS_BAR_DIRECTIVES Exporta todos los componentes y directivas relacionados con la barra de progreso lineal.
    IGX_LIST_DIRECTIVES Exporta todos los componentes y directivas relacionados con la lista.
    IGX_NAVBAR_DIRECTIVES Exporta todos los componentes y directivas relacionados con la barra de navegación.
    IGX_NAVIGATION_DRAWER_DIRECTIVES Exporta todos los componentes y directivas relacionados con el cajón de navegación.
    IGX_PAGINATOR_DIRECTIVES Exporta todos los componentes y directivas relacionados con el paginador.
    IGX_PIVOT_GRID_DIRECTIVES Exporta todos los componentes y directivas relacionados con la cuadrícula dinámica.
    IGX_PROGRESS_BAR_DIRECTIVES Exporta todos los componentes y directivas relacionados con la barra de progreso lineal y circular.
    IGX_QUERY_BUILDER_DIRECTIVES Exporta todos los componentes y directivas relacionados con el generador de consultas.
    IGX_RADIO_GROUP_DIRECTIVES Exporta todos los componentes y directivas relacionados con el grupo de radio.
    IGX_SELECT_DIRECTIVES Exporta todos los componentes y directivas relacionados seleccionados.
    IGX_SIMPLE_COMBO_DIRECTIVES Exporta todos los componentes y directivas relacionados con combos simples.
    IGX_SLIDER_DIRECTIVES Exporta todos los componentes y directivas relacionados con el control deslizante.
    IGX_SPLITTER_DIRECTIVES Exporta todos los componentes y directivas relacionados con el divisor.
    IGX_STEPPER_DIRECTIVES Exporta todos los componentes y directivas relacionados con el paso a paso.
    IGX_TABS_DIRECTIVES Exporta todos los componentes y directivas relacionados con las pestañas.
    IGX_TIME_PICKER_DIRECTIVES Exporta todos los componentes y directivas relacionados con el selector de tiempo.
    IGX_TOOLTIP_DIRECTIVES Exporta todos los componentes y directivas relacionados con la información sobre herramientas.
    IGX_TREE_DIRECTIVES Exporta todos los componentes y directivas relacionados con la vista de árbol.
    IGX_TREE_GRID_DIRECTIVES Exporta todos los componentes y directivas relacionados con la grilla de árboles.

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.