Uso de componentes independientes con Ignite UI for Angular

    Angular 14 introdujo el concepto de componentes independientes que permite una forma simplificada de crear aplicaciones al reducir la necesidad de utilizar NgModules. Los componentes independientes estuvieron en la vista previa del desarrollador hasta Angular 15. Para admitir este nuevo paradigma, todos los componentes Ignite UI for Angular ahora se exportan como standalone con la versión 16.0.0. La biblioteca aún exporta todos los NgModules existentes para lograr compatibilidad con versiones anteriores. Sin embargo, ya no declaran ninguna Ignite UI for Angular. En lugar de eso, importan y exportan los componentes standalone.

    How to use the new standalone components

    A partir de Angular 16 e Ignite UI for Angular 16.0, ahora puede simplemente agregar las importaciones que su componente standalone necesita en la propiedad imports. En el siguiente ejemplo, se puede utilizar IGX_GRID_DIRECTIVES para importar todos los componentes y directivas relacionados con la grilla.

    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]
})

    Pero también puede importar todos los componentes utilizados por su componente standalone individualmente. El siguiente ejemplo con IgxGridComponent e IgxColumnComponent cuando otro componente solo usa estos dos es el siguiente.

    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]
})

    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',
    standalone: true,
    imports: [IgxGridModule, AsyncPipe]
})

    Utility Directives

    ​IGX_GRID_DIRECTIVES que se muestra en los ejemplos anteriores es una directiva de utilidad que exporta todos los componentes y directivas relacionados con la red. La siguiente tabla enumera todas las nuevas directivas de utilidades que están disponibles en 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.