Angular·Angular from components to production

Control flow and directives

Use @if, @for and class/style bindings instead of hidden markup.

Intermediate 13 min read Lesson 4 of 300 Challenge included

What you will be able to do

Use @if and @else for conditional content.
Use @for with a track expression.
Use @empty for an empty list state.
Avoid hiding content with CSS when it should not be rendered.

In plain English

Modern Angular uses built-in control flow blocks. @if renders conditionally, @for renders lists with a required track expression, and @switch handles multiple cases. Track identity keeps list updates efficient.

lessons.htmlHTML

@if (loading) {
  <p>Loading…</p>
} @else {
  @for (lesson of lessons; track lesson.id) {
    <article>{{ lesson.title }}</article>
  } @empty {
    <p>No lessons yet.</p>
  }
}

Your turn

Render a list with track

Easy

Render courses in an @for block tracking course.id.

HTML · starter

@for (course of courses) { }

Check your understanding before moving on.

Knowledge checkQuestion 1

What does @empty render?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Services and dependency injection

Lesson 4 of 300 · 0% of course