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

  • Todos los componentes Ignite UI for Angular ahora se exportan comostandalone componentes. La biblioteca sigue exportandoNgModules, que se ha conservado para compatibilidad hacia atrás, pero ya no declaran ninguno de los componentes Ignite UI for Angular. En su lugar, simplemente importan y exportan losstandalone componentes. Ten en cuenta que losstandalone componentes aún están en fase de previsualización. Algunas exportaciones de directivas de utilidad pueden cambiar en el futuro y pueden faltar en la documentación de la versión inicial, de ahí elpreview estado de la funcionalidad.


    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
    • Cambio de comportamiento: LosigxChip estilos han sido revisados y la animación de seleccionar contenedor se ha eliminado al seleccionar o deseleccionar un chip.
    • Cambio de comportamiento: El comportamiento del botón de eliminar ha sido revisado. Ahora, cuando el chip está en undisabled estado, el botón de quitar está oculto.
  • 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
    • Nueva entradavariant que puede tomar cualquiera de los siguientes valores:'primary','info','success','warning','danger'
  • IgxExpansionPanel:
    • IgxExpansionPanelTitleDirectiveyIgxExpansionPanelDescriptionDirective mostrar la descripción emergente del contenido de texto proporcionado.
  • IgxDateRangePicker
    • AñadidoshowWeekNumbers una entrada que cambia si el número de una semana será visible al lado
  • IgxGrid, IgxHierarchicalGrid:
    • totalItemCountahora también puede ser vinculado comoInput en escenarios de virtualización remota.
    • rowExpandedIndicatorTemplate,rowCollapsedIndicatorTemplate,headerExpandedIndicatorTemplate,headerCollapsedIndicatorTemplate ahora también puede asignarse paraInput proporcionar plantillas para los indicadores de expansión o plegado de fila y cabecera respectivamente. Esto se suma a las directivas equivalentes existentes para permitir su reutilización.
  • IgxPivotGrid
    • Se activapivotConfigurationChanged un evento añadido cada vez que alguna de laspivotConfiguration propiedades se cambia desde la interfaz.
  • ISortingExpressionahora acepta un parámetro genérico opcional para el estrechamiento de tipos de lafieldName propiedad a claves del elemento de datos, por ejemplo,ISortingExpression<MyDataItem>
  • Util
    • Se añadió una nuevaCachedDataCloneStrategy que permite clonar objetos con referencias circulares.

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