Blog

Angular 17 Control Flow: Elevate Your Development Experience

Deyan Kamburov / Monday, November 27, 2023

I'm excited to share that you can enhance your Angular development experience within Ignite UI for Angular components by embracing the new Block Template Syntax for optimized, built-in control flow. This powerful feature simplifies your code, improves type checking, reduces bundle size, and boosts performance. So now, let's dive into some code samples to see the syntax in action!

Things I will cover in this quick guide-like article:

Try Ignite UI for Angular

What Is Built-in Control Flow in Angular?

The term "Control Flow" in Angular refers to the order in which statements and directives are executed within an Angular application. In Angular 17, there is a new optimized built-in syntax to manage the control flow (@if, @switch, @for), offering developers finer control over the execution flow. This brings developers closer to familiar patterns in most programming languages, minimizing errors in constructing application views. It is directly available and ready to use in templates without additional imports.

In Angular 17, Control Flow is managed by the refined change detection system, efficiently applying application state changes to the view. This underscores Angular's role as a provider of a solid foundation for building modern, interactive web applications.

Starting Off With Conditional Statements 

What you need to do is upgrade your *ngIf and *ngSwitch with the new syntax for a more intuitive and cleaner code. 

@if

Utilize the @if within an IgxColumn template of the IgxGrid for conditional rendering: 

<igx-column field="Discontinued" header="Discontinued" [sortable]="true" [dataType]="'boolean'"> 
    <ng-template igxCell let-cell="cell" let-val> 
        @if (val) { 
            <img src="assets/active.png" title="Continued" alt="Continued" />
        } @else { 
            <img src="assets/expired.png" title="Discontinued" alt="Discontinued" /> 
        } 
    </ng-template> 
</igx-column>
 

Demo @if in IgxColumn

@switch 

Apply @switch directive within an IgxSelectItem of the IgxSelect component for dynamic icon selection: 

<igx-select-item [value]="fruit.type" class="select__entry" [text]="fruit.type">
    {{fruit.type}}
    @switch (fruit.delivery) {
    @case ('flight') { <igx-icon>flight</igx-icon> }
    @case ('train') { <igx-icon>train</igx-icon> }
    @case ('boat') { <igx-icon>directions_boat</igx-icon> }
    }
</igx-select-item>

Demo @switch in IgxSelect

Let's Talk About The Built-In for Loop Next

Experience a faster rendering speed with the new built-in for loop.

@for 

A lot of use cases can be figured out with this. The example here uses the IgxDropDown:

@for (town of towns | startsWith:townSelected; track town.name) {
    <igx-drop-down-item [value]="town">
        {{town}}
    </igx-drop-down-item>
}

Demo For Loop in IgxDropDown 

Or looping the columns of the grid: 

@for(c of columns; track c.field) {
    <igx-column
    [field]="c.field"
    [header]="c.field"
    [cellStyles]="c.cellStyles">
    </igx-column>
}

Demo For Loop in IgxGrid 

Deferrable Views for Lazy Loading 

Leverage the new deferrable views to enhance lazy loading with a declarative and powerful approach. This new feature can give you the ability to create a deferred loading of the list items of the IgxList components. They will appear after a button click: 

<igx-list #fruitList>
    @defer (on interaction(b1)) {
        @for(fruit of fruitsData; track fruit) {
            <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content">
                {{ fruit }}
            </igx-list-item>
        }
    } @placeholder {
        <button #b1 type="button" igxButton="raised">Click here to trigger interaction</button>
    }
</igx-list>

Demo deferrable view with IgxList 

Combined Sample 

If you want, you can explore a more comprehensive example that integrates all the mentioned features. Here, we can defer the main content of the nav drawer. It will be loaded right after an item from the nav is selected: 

 

@defer(on interaction(drawer)) {
  <span igxButton="icon" igxToggleAction="navigation">
    <igx-icon family="material">menu</igx-icon>
  </span>
  <h5>{{selected}}</h5>
  @switch(selected) {
    @case('Grid') {
      <app-grid-adf-style-sample></app-grid-adf-style-sample>
    }
    @case('Autocomplete') {
      <app-autocomplete></app-autocomplete>
    }
    @default {
      <app-reactive-form-validation></app-reactive-form-validation>
    }
  }
} @placeholder {
  <span>Pick a component from nav drawer to load...</span>
}

You can check out the network tab to see the application's initial load time and resources. Since we are deferring the main content of the nav drawer, this is what is loaded:  

And once the user selects an item, the content and the resources for the view are being loaded: 

Depending on the size of the deferred views, you can increase your load time dramatically. More information on deferred views can be found here.  Also, the listing of the nav items can be achieved with the new syntax:

@for(item of navItems; track item.name) {
  <span igxDrawerItem igxRipple (click)="navigate(item)">
    <igx-icon family="material">{{ item.name }}</igx-icon>
    <span>{{ item.text }}</span>
  </span>
}
 

Also, in one of the views from the sample there are reactive form inputs that are utilizing this feature to show the validations, icons and hints: 

 

<igx-input-group>
    <label igxLabel for="password">Password</label>
    <input igxInput name="password" [type]="showPassword ? 'text' : 'password'" formControlName="password" />
    @if (password.errors?.minlength) {
        <igx-hint >Password should be at least 8 characters</igx-hint>
    }
    @if (password.value) {
        <igx-icon igxSuffix (click)="showPassword = !showPassword">
            {{ togglePasswordVisibility }}
        </igx-icon>
    }
</igx-input-group>

Getting Started 

Upgrade your Angular project to version 17 and try out the built-in control flow today. To use it in your existing projects. Explore the improved developer experience and boost the performance of your Angular application.  

Happy coding with the enhanced Angular control flow!

Ignite UI for Angular