Angular, regarded as one of the top front-end development frameworks, is all set to release its highly anticipated 17th version this November. Coming with this update are plenty of fascinating features, a special focus being on improvements to templates. Notably, Angular has introduced a new built-in syntax for control flow, along with deferrable views. This post will delve into these pivotal changes and discuss how Angular developers can leverage them.
A Change in Syntax:
Angular's Request for Comments (RFC) process had previously proposed new control flow and deferrable views, introduced as " #-syntax." These HTML-like tags used constructs like {#if}, {:else}, and {/if}. However, as the RFC discussions continued, it became evident that alternative syntax options needed to be explored.
Enter the "@-syntax". This syntax, similar to the examples given above, gained significant support throughout the RFC discussions. It won over both Angular as well as non-Angular developers, leading to a radical pivot in Angular's template syntax.
1import { Component, computed, signal } from '@angular/core';
2
3@Component({
4 selector: 'app-root',
5 standalone: true,
6 imports: [],
7 template: `@if(showAuthStatus()) {
8 <button (click)="toggle()">Sign Out</button>
9 } @else {
10 <button (click)="toggle()">Sign In</button>
11 }
12 <h1>{{ status() }}</h1>
13
14 <br/>
15 <hr/>
16
17 @for(item of items; track item.id) {
18 <div>{{ item.name }} is {{ item.age }} years old</div>
19 }
20
21 <br/>
22 <hr/>
23
24 @for(element of emptyArray; track element) {
25 <div>{{element}}</div>
26 } @empty {
27 <div>No items</div>
28 }
29
30 <br/>
31 <hr/>
32
33 @switch(bestFramework) {
34 @case('Angular') {
35 <div>Angular is the best framework!</div>
36 }
37 @default {
38 <div>Try Angular!</div>
39 }
40 }
41 `,
42 styleUrls: ['./app.component.scss'],
43})
44export class AppComponent {
45 readonly showAuthStatus = signal(false);
46 readonly status = computed(() =>
47 this.showAuthStatus() ? 'Logged In' : 'Please Log In',
48 );
49
50 emptyArray = [];
51
52 items = [
53 {id: 1, name: 'John', age: 25},
54 {id: 2, name: 'Jane', age: 24},
55 {id: 3, name: 'Jack', age: 26},
56 ];
57
58 bestFramework = 'Angular';
59
60 toggle() {
61 const currentValue = this.showAuthStatus();
62 this.showAuthStatus.set(!currentValue);
63 }
64}This new syntax continues to be under development, bringing with it the promise of making Angular more intuitive and efficient. The next version of Angular is looking to be a significant stepping stone towards that end.
