Angular 17 Control Flow: Elevate Your Dev Experience
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 that will be covered in this guide-like article:
*What is built-in control flow in Angular
*Conditional statements
*The new built-in for loop
*Defferable view for lazi loading
*Combined sample
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.
Utilize the @if within an IgxColumn template of the IgxGrid for conditional rendering:
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>Let’s Talk About The Built-In for Loop Next
Experience a faster rendering speed with the new built-in for loop.
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> }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> }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 . 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!
Originally published at https://www.infragistics.com on November 27, 2023.
