Las Novedades más Destacadas Que Trae Angular 18 – Parte 2 (Final)

5 minuto(s)

En esta página:

En la parte anterior pudimos apreciar cosas geniales de Angular 18.

Ahora vamos a concluir esta lista con otras nuevas características que trae esta versión de Angular.

En este artículo te compartiré Las Novedades más Destacadas Que Trae Angular 18 – Parte 2 (Final), vamos con ello.

Partes

Parte 1
Parte 2 (Final)

Aplicación web creada con Angular — Angular ha sido usado en grandes proyectos como la plataforma de videos YouTube

Como en la parte anterior, para conocer mejor las novedades, colocaré el nombre de la novedad, un texto descriptivo y una imagen o elemento referencial.

Repetición de Eventos en Vista Previa

Cuando un usuario realiza determinados eventos en una web, estos eventos se pueden perder si la web aún no esta renderizada o hidratada.

En Angular 18 estos eventos aún se mantienen o se repiten.

En el siguiente video te muestro como configurar la repetición de eventos.

Asimismo en el video verás como un usuario agrega 4 productos a su carrito y como los eventos se mantienen o repiten, a pesar que la tienda online aún no estaba hidratada:

Extensión Angular DevTools Actualizada

La popular extensión para desarrollador Angular ha sido actualizada con características interesantes.

Ahora brinda información sobre el estado de hidratación de un componente.

Incluye un modo superposición que trabaja con el explorador de componentes: .

En el siguiente video te muestro como funciona la actualizada extensión AngularDevTools:

Angular CDK y Material con Hidratación

La tecnología Hydration o hidratación ahora estará en el Component Dev Kit (CDK) y Angular Material.

Con ello las interfaces trabajarán más rápido, gestionarán mejor los eventos del usuario y todos los beneficios de la tecnología de hidratación.

Angular CDK cuenta con varios elementos de interfaz de usuario, en el siguiente video puedes ver un ejemplo del componente Dialog:

Hidratación Parcial

Esta característica permite cargar menos JavaScript y por ende hace que las aplicaciones sean más rápidas.

La sintaxis es algo similar a las vistas diferibles o aplazadas mediante el uso de bloques.

En la siguiente imagen puedes ver un bloque @defer con un par de condiciones.

Solo se hidratará el bloque mientras se cumplan ambas condiciones en una plantilla:

Hidratación parcial con el bloque @defer — Puedes usar más de un bloque @defer en tus plantillas

Firebase App Hosting Para Angular

Ahora podrás alojar tus aplicaciones Angular en el servicio Firebase App Hosting.

Mediante App Hosting podrás desarrollar e implementar de forma ágil tus aplicaciones Angular.

También podrás desplegar otro tipo de aplicaciones.

Actualmente es una herramienta de pago de Firebase:

Plataforma Firebase App Hosting — Puedes crear proyectos con React, Vue, Svelte y más en Firebase App Hosting

Sabías que YouTube recibe las últimas actualizaciones de Angular.

Contenido Alternativo en <ng-content><ng-content>

En Angular 18 podrás crear contenido con las etiquetas <ng-content><ng-content>

Por ejemplo el archivo app.component.ts de tu componente, en la sección template.

En el siguiente veo probamos estas característica y te mostramos como funciona:

Contenido alternativo en ng-content — ng-content es un marcador de posición especial para indicarle a Angular en donde debe representar un contenido

Propiedad events en Control de Formulario

En Angular 18 las clases para formularios FormControl, FormGroup y FormArray cuentan con la propiedad events.

La propiedad events permite hacer un seguimiento de los cambios que ocurren en un formulario.

Los cambios de formulario que evalúa son value, touch state, pristine status y control status.

Propiedad events en control de formulario — Esta funcionalidad obtuvo más de 440 aprobaciones en GitHub

Migración Automática al Creador de Apps Basado en Vite JS

Angular 18 ha creado una serie de comandos y documentaciones para que la migración de webpack a Vite JS sea más práctica.

Crear aplicaciones con Angular ahora es más rápido y si deseas migrar de webpack a Vite JS esta actualización te va a gustar.

En el siguiente video puedes ver como migramos de webpack a Vite JS con la Angular CLI:

Puedes encontrar todos los comandos y guías de migración en este enlace.

redirectTo con Funciones

La propiedad redirectTo ahora admite funciones personalizadas.

Esto te permitirá devolver un string dentro de la función personalizada.

Asimismo te puede ayudar para verificar si una ruta existe y otras tareas más:


const routes: Routes = [
    { path: "primer-component", component: PrimerComponent },
    {
      path: "pagina-antigua-usuario",
      redirectTo: ({ queryParams }) => {
        const errorHandler = inject(ErrorHandler);
        const userIdParam = queryParams['usuarioId'];
        if (userIdParam !== undefined) {
          return `/usuario/${userIdParam}`;
        } else {
          errorHandler.handleError(new Error('Intento de navegación a la página de usuario sin ID de usuario'));
          return `/not-found`;
        }
      },
    },
    { path: "user/:usuarioId", component: OtroComponent },
  ];

const routes: Routes = [

{ path: "primer-component", component: PrimerComponent },

{

path: "pagina-antigua-usuario",

redirectTo: ({ queryParams }) => {

const errorHandler = inject(ErrorHandler);

const userIdParam = queryParams['usuarioId'];

if (userIdParam !== undefined) {

return `/usuario/${userIdParam}`;

} else {

errorHandler.handleError(new Error('Intento de navegación a la página de usuario sin ID de usuario'));

return `/not-found`;

}

{ path: "user/:usuarioId", component: OtroComponent },

];

TypeScript 5.4 en Angular 18

Esta nueva versión de Angular trae por defecto TypeScript 5.4

Podrás trabajar con la utilidad NoInfer<>, los métodos Object.groupBy() y Map.groupBy() y otros más.

Puedes revisar todas las nuevas características de TypeScript 5.4 en este enlace.

Lanzamiento de TypeScript 5.4 — TypeScript es mantenido por la empresa Microsoft

El equipo de Angular se siente agradecido con toda la comunidad que hizo posible que Angular resurgiera.

También están proponiendo a ECMAScript que las Signals o señales pasen a estar en la web, es decir nativamente en el lenguaje de programación JavaScript.

Descubre Los 5 Mejores Escritorios Para Programadores.

Conclusión

En este artículo has conocido Las Novedades más Destacadas Que Trae Angular 18.

La mejor manera de probarlas es creando un proyecto nuevo con Angular 18.

Allí podrás ver el potencial que tienen estas nuevas características.

Nota(s)

Los novedades y características mencionadas en este Post pueden dejar de existir, ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Angular.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.