Using a new way to create templates – control flow
Since version 2 of the framework, the HTML template syntax has remained relatively stable and without much evolution. By using custom properties, we can evaluate conditions and iterate over lists and other forms of flow control to create visualization logic in components. The *ngIf, *ngFor, and *ngSwitch directives are used to improve the developer experience, internally generating the elements in the HTML. You can read more about this in Chapter 4, Components and Pages.
Starting with version 17, the Angular team introduced a new form of control flow in HTML. The syntax in this version is in developer preview, which means that it is stable for production but may have changes in future versions. Let’s refactor our code to use the syntax and see the difference in practice.
In the app.component.html file, we will change the following:
@if (loadService.isLoading) {
<app-loading-overlay />
}
<...
