Laptop mit Code und Monitoren
Dennis, Kiya | 02.11.2023

Angular's New Control Flow: @-Syntax

Webentwicklung > Angular's New Control Flow: @-Syntax

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.

Inhalt
  • What is the new control flow in Angular?
  • How does the new @-syntax work?
Dennis Hundertmark
Dennis (Softwareentwickler)

Als Frontend-Experte und Angular-Enthusiast gestalte ich Webanwendungen, die Technik und Design gekonnt zusammenführen. Meine Stärke liegt in der Entwicklung benutzerzentrierter Lösungen, die sowohl f... mehr anzeigen

Gitlab
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund