Actualizaciones de angular 16
- Aplicación de signals:
Aplicación de interfaz reactiva (más intuitivo que librería RXJS)
- Mejora en el renderizado del SEO (Hidratación):
Hidratación no destructiva que no cambia contenido HTML, por lo cual no crea conflictos
- Entradas obligatorias del componente:
Para evitar problemas en términos de entrada de dato se implementó las entradas o
bingins obligatorio, son iguales a los anteriores, solo que se les agrega la propiedad
“{{required: true}}, en el caso de ser obligatorios, esto permite mantener la persistencia de
los datos que el creador asigna como obligatorios para un funcionamiento optimo del
componente.
@Component({})
class HomeComponent {
@Input({required: true}) someRequiredInput;
}
- Api de depuración de inyección de dependencias:
Se puede hacer depuración de tokens, inyectores, ámbitos e instancias de tus
dependencias, también se puede usar la Api de angular para simular diferentes casos de
prueba para las dependencias, esto ayuda a la creación de documentación.
- Soporte para Tailwind CSS (se puede seguir usando el patrón SCSS):
Es un popular framework CSS (utility-first) que permite dar estilo a tus componentes con
clases en lugar de CSS personalizado
- Soporte para trusted Types nativos:
Ayuda a prevenir ataques de cross-site-scripting (XSS) mediante la aplicación de reglas
estrictas sobre cómo se utilizan las cadenas en contexto sensible (versiones de angular lo
manejan, pero este cambio en Angular permite proteger nuevos campos posibles para ese
ataque)
// Import the createTrustedHTML function
import { createTrustedHTML } from '@angular/core';
// Create a component that uses Trusted Types
@Component({
selector: 'app-hello',
template: `
<div [innerHTML]="message"></div>
`
})
export class HelloComponent {
// Create a trusted HTML value using the createTrustedHTML function
message = createTrustedHTML('<h1>Hello, world!</h1>');
// Alternatively, use the safevalues library to create trusted values
// import { createHtml } from 'safevalues/implementation/html_impl';
// message = createHtml('<h1>Hello, world!</h1>');
}
- Soporte para importaciones dinámicas de datos de enrutador:
Una nueva forma de obtener información del enrutador en los componentes sin tener que
inyectar “ActivedRoute”, Con esta función, se puede vincular algunos datos del enrutador a
las entradas de su componente (parámetros de ruta, los datos, parámetros de consulta, el
fragmento y la url), esto sirve para código simple y limpio
Pasar de:
// Import the ActivatedRoute service
import { ActivatedRoute } from '@angular/router';
// Inject the ActivatedRoute service in the constructor
constructor(private route: ActivatedRoute) {}
// Use the ActivatedRoute service to get the router data
ngOnInit() {
// Get the route params
this.route.params.subscribe(params => {
// Do something with params
});
// Get the route data
this.route.data.subscribe(data => {
// Do something with data
});
// Get the query params
this.route.queryParams.subscribe(queryParams => {
// Do something with queryParams
});
// Get the fragment
this.route.fragment.subscribe(fragment => {
// Do something with fragment
});
// Get the url
this.route.url.subscribe(url => {
// Do something with url
});
}
A código más limpio como:
// Define the component inputs for the router data
@Input() params: Params;
@Input() data: Data;
@Input() queryParams: Params;
@Input() fragment: string;
@Input() url: UrlSegment[];
// Use the component inputs to get the router data
ngOnInit() {
// Do something with params
// Do something with data
// Do something with queryParams
// Do something with fragment
// Do something with url
}
