Angular 7: Novedades de esta actualización

La actualización 7 de Angular es una actualización que modifica la plataforma entera, es decir el “core” o núcleo del framework, Angular Material y el CLI.

Además, si quieres más información sobre la última versión de Angular puedes consultar las novedades de Angular 17 o nuestro tutorial sobre cómo actualizar a la última versión.

Material Design

Material, el lenguaje de diseño de Google en el que se basa Angular Material, ha recibido una gran actualización en 2018, por lo que la biblioteca se ha actualizado para reflejar dichos cambios.

CDK

El Component Development Kit se ha actualizado añadiendo dos nuevas funcionalidades:

• Virtual Scrolling
• Drag and Drop

Virtual Scrolling

Ahora los elementos de una lista muy larga solo se cargarán si están cerca de ser mostrados, llevándonos a tener aplicaciones más rápidas, al no cargar todo el código al inicio.

Para esto solo tenemos que utilizar cdk-virtual-scroll-view:

1<cdk-virtual-scroll-viewport itemSize="50" class="ejemplo-viewport">
2
3 <div *cdkVirtualFor="let item of items" class="ejemplo-item">{{item}}</div>
4
5</cdk-virtual-scroll-viewport>

Drag and Drop

Sirve para poder arrastrar y renderizar en la nueva ubicación los elementos que elija el usuario, que interactúa con ellos arrastrándolos.

Para utilizarlo hay que utilizar la siguiente combinación de código, primero añadiendo esto al html:

1<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
2
3 <div class="box" *ngFor="let pelicula of peliculas" cdkDrag>{{movie}}</div>
4
5</div>

Y esto al archivo TypeScript:

1drop(event: CdkDragDrop<string[]>) {
2
3   moveItemInArray(this.peliculas, event.previousIndex, event.currentIndex);
4
5 }

Mejoras de rendimiento

El polifyll reflect-metadata solo es necesario durante el desarrollo, ahora es eliminado de forma automática al generar la aplicación definitiva, y con ello esa capa de lógica extra que puede ralentizar la aplicación.

También se ha cambiado el ajuste por defecto de Bundle Budgets, que avisa cuando la aplicación ocupa en exceso, pasando ahora en un aviso si ocupa más de 2 MB y dando error al pesar más de 5 MB. Estos avisos también le pueden aparecer al usuario utilizando la característica Data Saver de Google Chrome.

CLI

Cuando el usuario utilice comandos habituales del CLI de Angular, como ng new o ng add @angular/material, mostrará información para ayudar al usuario a descubrir nuevas funciones que aportan.

Además CLI se ha añadido a Schematics, de modo que si queremos utilizarlo en una colección de Schematics debemos añadirle la clave x-prompt.

Select

Se ha añadido el elemento select nativo de HTML5 a los componentes mat-form-field, de manera que puedes conseguir mejoras de ventajas de uso y rendimiento al usar el componente nativo, a pesar de que el componente mat-select pueda seguirse utilizando para conseguir un control total de las opciones de representación.

Web Compoments

Ahora Angular Element soporta los Web Components estándar.

Lanzamientos de colaboradores

Con el lanzamiento de Angular 7 hay varias herramientas y componentes que se han lanzado para usarlos:

• Angular Console: una consola visual que te permite arrancar y ejecutar proyectos Angular en la máquina local sin tener que acordarte de todos los parámetros que se usan en el CLI y automatizando algunas cosas por ti. Te facilitará el uso de Angular.
• Angular Fire 2: la biblioteca oficial para usar Firebase desde Angular.
• NativeScript: para crear aplicaciones nativas a partir de tu aplicación web.
• Stackblitz: el editor online específico para Angular que te permite programar y compartir las aplicaciones creadas directamente desde tu navegador, sin instalar nada en local.

Actualización de dependencias

También se ha actualizado los componentes del sistema a las siguientes versiones:

• TypeScript 3.1
• RxJS 6.3
• Node 10 (aunque se sigue soportando Node 8 también)

Actualizar a v7

Para actualizar de Angular 6 a Angular 7 sencillamente hay que utilizar el siguiente comando: ng update @angular/cli @angular/core Con esto ya hemos comentado todas las novedades que trae Angular 7 con respecto a su anterior versión.