DEV Community

Cover image for Angular for block and empty section
Nhan Nguyen
Nhan Nguyen

Posted on

Angular for block and empty section

In Angular v17, the @for block repeatedly renders the content of a block for each item in a collection, and we optionally include an @empty section immediately after the @for block content.

The content of the @empty lock displays when there are no items.

In the below example, I used Angular Async pipe to subscribe data from list$

Notes: async pipe will emit an initial default null value if list$ does not emit a default value.

https://stackblitz-starters-rtsaj7.stackblitz.io/

Image description

Top comments (0)