Nueva Sintaxis de Template de Angular

Angular está cambiando la forma de escribir templates dinámicos

Estos días el equipo de Angular ha compartido una noticia que posiblemente sea un auténtico antes y después en la vida del popular framework. Y es que por primera vez desde la beta de Angular 2, han decidido rearmar la sintaxis de las directivas del Template, es decir que, próximamente, no va a servir más hacer *ngIf o *ngFor.

Nueva estructura condicional

{#if expr}
Condición verdadera
{:else if otra_expr}
Otra condición verdadera
{:else}
Condición falsa
{/if}

Nueva estructura cíclica

{#for item of items; track item.id}
{{ item }}
{:empty}
Sin items
{/for}

Nueva estructura switch

{#switch cond}
{:case x}
X case
{:case y}
Y case
{:case z}
Z case
{:default}
Default
{/switch}

Ventajas de la nueva sintaxis

Puede parecer un cambio algo fuerte luego de tantos años con la misma sintaxis, sin embargo era necesario. Lo principal que quería hacer el equipo de Angular era armar una sintaxis despegada totalmente del HTML, y esto se debe a que en código muy extenso se hace difícil de debuguear. Otra ventaja es que se parece mucho más a la sintaxis clásica de estructuras de JavaScript, por lo que es más rápida de aprender. También afirman mejorar el rendimiento de la estructura FOR (esperemos, porque aun en versiones actuales se lagea mucho con muchos elementos). 

Respecto a quienes se puedan llegar a preocupar por su código, el equipo de Angular ya comentó que van a armar un script de migración que convierta las viejas directivas en las nuevas sin afectar nada de lo programado; y aun así las viejas directivas van a seguir funcionando, aunque Angular va a desincentivar su uso. También tendrá su propio resaltado de sintaxis mediante el Angular Language Service, y gracias a todo esto no descartan que existan nuevas estructuras en el futuro.

Entradas Relacionadas

Nueva Sintaxis de Template de Angular
Ignacio Buioli 3 de julio de 2023
1 min. de lectura
Compartir
Categorías
Archivar