Dynamic templates with control flow blocks

Learn how to build dynamic UI using `@if`, `@for` and `@switch` blocks with several examples

1 min

v.18.x

Fabio Biondi

Google Developer Expert
Microsoft MVP

Learn how to create dynamic HTML templates in Angular with several basic examples, the creation of a TabBar and a multi-step navigation using control flow blocks :

@if: conditionally render blocks

@switch: a block directly inspired by the JavaScript `switch` statement

@for: create dynamic lists

Learn how to work with dynamic list creating a a TODO list

# Introduction

Until Angular 16, ngIf, ngFor and ngSwitch directives were the simplest strategy to create dynamic templates.

Since the latest versions, Angular supports the new control flow blocks that are really powered, provide more features and don't need to be imported:

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Dynamic templates with control flow blocks

Learn how to build dynamic UI using `@if`, `@for` and `@switch` blocks with several examples

1 min

v.18.x

Fabio Biondi

Google Developer Expert
Microsoft MVP

Learn how to create dynamic HTML templates in Angular with several basic examples, the creation of a TabBar and a multi-step navigation using control flow blocks :

@if: conditionally render blocks

@switch: a block directly inspired by the JavaScript `switch` statement

@for: create dynamic lists

Learn how to work with dynamic list creating a a TODO list

# Introduction

Until Angular 16, ngIf, ngFor and ngSwitch directives were the simplest strategy to create dynamic templates.

Since the latest versions, Angular supports the new control flow blocks that are really powered, provide more features and don't need to be imported:

Angular Cookbook: The Basics

Send your feedback

Angular Cookbook: The Basics

# Introduction

Send your feedback

# Introduction