Ignite UI for Angular 16.0.0: Vea las emocionantes mejoras

Ignite UI for Angular 16.0.0: Vea las emocionantes mejoras

¡Hoy enviamos la nueva versión Ignite UI for Angular 16.0.0 con soporte completo para Angular v16! Consulta las últimas actualizaciones y empieza a crear mejores aplicaciones.

5min read

¡Todos estamos entusiasmados con el nuevo lanzamiento de Angular v16! Estamos ansiosos por poner nuestras manos en las API independientes y aprovechar la reactividad, la representación del lado del servidor y las herramientas mejoradas. En Infragistics, nos esforzamos por brindarle la mejor experiencia de usuario posible y mantenerlo actualizado sobre las últimas versiones de marcos, plataformas y tecnología. Es por eso que estamos emocionados de compartir lo que hemos incluido en la versión Ignite UI for Angular 16.0.0, con soporte completo para Angular v16.

Todas las novedades de Ignite UI for Angular 16.0.0

Uso de componentes independientes con Ignite UI for Angular– Versión preliminar

Una de las mayores diferencias es que Angular v16 introduce el concepto de componentes independientes. Esto permite una forma simplificada de crear aplicaciones al reducir la necesidad de usar NgModules.

Información sobre herramientas para el subtítulo/título completo al pasar el cursor por el panel Expansión

El registro de cambios completo de Ignite UI for Angular para 16.0.0

General

  • All Ignite UI for Angular components are now exported as standalone components. The library still exports NgModules, which have been preserved for backward compatibility, but they no longer declare any of the Ignite UI for Angular components. Instead, they just import and export the standalone components. Bare in mind that the standalone components are still in a preview stage. Some utility directive exports may change in the future and may be missing from the documentation in the initial release, hence the preview state of the feature.


    Ahora puedes hacer:

// IGX_GRID_DIRECTIVES exports 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]
})

o

// Single import of only the <igx-grid> component.
import { IgxGridComponent } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    standalone: true,
    imports: [IgxGridComponent, AsyncPipe]
})

or still

// `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]
})
  • IgxChip
    • Behavioral Change: The igxChip styles have been revisited and the select container animation has been removed when selecting/deselecting a chip.
    • Behavioral Change: The remove button behavior has been revisited. Now when the chip is in a disabled state, the remove button is hidden.
  • IgxGrid, IgxHierarchicalGrid
    • Cambio de última hora: Se ha cambiado el nombre de las directivas IgxHeaderExpandIndicatorDirective e IgxHeaderCollapseIndicatorDirective, así como de las propiedades headerExpandIndicatorTemplate y headerCollapseIndicatorTemplate a IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, headerExpandedIndicatorTemplate y headerCollapsedIndicatorTemplate respectivamente para reflejar correctamente su propósito. Las migraciones automáticas están disponibles y se aplicarán en ng update.
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

Cambios importantes: Las siguientes propiedades de cuadrícula, obsoletas desde la versión 12.1.0, ahora se eliminan:

  • evenRowCSS;
  • oddRowCSS;
  • página;
  • paginación;
  • por página;
  • totalPáginas;
  • isFirstPage;
  • isLastPage;
Además, se eliminan los siguientes eventos de cuadrícula en desuso.
  • pageChange;
  • perPageChange;
  • pagingDone;
Los métodos obsoletos que se han eliminado de la API de grid son:

  • nextPage;
  • previousPage;
  • paginate;
  • getCellByColumnVisibleIndex;

Nuevas características

  • IgxChip
    • New input variant which can take any of the following values: 'primary', 'info', 'success', 'warning', 'danger'
  • IgxExpansionPanel:
    • IgxExpansionPanelTitleDirective and IgxExpansionPanelDescriptionDirective show tooltip of the provided text content.
  • IgxDateRangePicker
    • Added showWeekNumbers input that toggles whether or not the number of a week will be visible next to it
  • IgxGrid, IgxHierarchicalGrid:
    • totalItemCount can now also be bound as Input in remote virtualization scenarios.
    • rowExpandedIndicatorTemplate, rowCollapsedIndicatorTemplate, headerExpandedIndicatorTemplate, headerCollapsedIndicatorTemplate can now also be bound as Input to provide templates for the row and header expand/collapse indicators respectively. This is in addition to the existing equivalent template directives to allow reuse.
  • IgxPivotGrid
    • Added pivotConfigurationChanged event triggered any time any of the pivotConfiguration properties are changed via the UI.
  • ISortingExpression now accepts an optional generic type parameter for type narrowing of the fieldName property to keys of the data item, e.g. ISortingExpression<MyDataItem>
  • Util
    • Added new CachedDataCloneStrategy that allows for cloning object with circular references.

Conclusión

Seguimos lanzando nuevas funciones, mejorando el rendimiento y proporcionando mejoras de estabilidad continuamente. Comprometidos a brindarle el mejor kit de herramientas de interfaz de usuario Angular y conocimientos relacionados, nuestro objetivo es brindarle más conocimientos. Aparte de la nueva Pivot Grid que es tan crucial, sabemos que otros componentes como la Angular Data Grid también son súper críticos. Es por eso que publicamos un útil tutorial de Angular UI Data Grid para ayudarlo a aprender a crear una cuadrícula de interfaz de usuario Angular con todas las funciones desde cero. Ve y míralo.

También seguimos desarrollando la mejor plataforma de creación de aplicaciones de bajo código basada en la nube (App Builder) que acelera el proceso de diseño a código mediante la asignación de archivos de diseño de Sketch o Adobe XD a componentes de interfaz de usuario reales y la creación de código listo para producción. De esta manera, puede generar aplicaciones Angular, Blazor o Web Components más rápido que nunca. Algunas de las mejoras se deben a las solicitudes de usuarios como tú a través de nuestro repositorio de GitHub. Con esto en mente, siempre estamos abiertos a sugerencias y comentarios, lo que nos hace crecer y atender mejor sus necesidades de desarrollo. Por último, sabemos que la transparencia y la visibilidad de nuestros próximos objetivos también son fundamentales. ¡Es por eso que mantenemos la hoja de ruta siempre actualizada!

Además

Síguenos enMediumpara estar al día y conocer los últimos proyectos relacionados con la Angular en los que estamos trabajando. Danos una estrella enGitHuby ayúdanos a seguir mejorando nuestro producto abordando cualquier inquietud, pregunta o solicitud de características en la sección de problemas. Continuaremos haciendo todo lo posible para mejorar constantemente la experiencia del producto para satisfacer todas sus necesidades y crear aplicaciones con facilidad.

Ignite UI for Angular beneficios

Angular
Solicitar una demostración