When building user interfaces for web applications, we often face scenarios like: "Display a list of items if it's available, or show a placeholder if it's empty." In Angular, these kinds of tasks are handled using structural directives — powerful tools that control what gets rendered in the template and when.

Unlike regular HTML attributes, structural directives don't just tweak an element's behavior — they actually change the structure of the DOM by adding or removing entire elements.

Structural Directive NgFor

Let's say we have a list of tasks in our TaskListComponent. Each task should be shown with its own interface elements: a delete button, a status toggle, etc. Writing each task manually in the HTML would be inefficient and difficult to maintain as the data changes.

ts

Angular provides the *ngFor directive, which lets you loop through an array and automatically generate an HTML element for each item.

python

Here, *ngFor="let task of tasks" tells Angular: "For every task in the tasks array, create one <task-component>". If the array contains 3 tasks, Angular will render 3 separate task-component instances, each with its own data. This makes the UI more scalable and eliminates repetitive code.

Extra Features of ngFor

In addition to basic iteration, *ngFor supports several useful context variables you can access directly in the directive using let ....

Here's a quick reference:

Here's an example using some of them:

python

In this example, the odd variable is used to apply a CSS class to every other row, making the list visually easier to scan.

Structural Directive NgIf

Let's take a look at how conditional rendering works using a simple task list example. We want to display the list if it contains tasks, and if it's empty, show a message like “No tasks yet.”

In Angular, we use the *ngIf directive to conditionally show or hide elements. While it looks like a regular HTML attribute, it actually does much more behind the scenes.

python

When Angular processes *ngIf, it rewrites the template behind the scenes. Instead of rendering the element directly, it wraps it inside an <ng-template>, and only adds it to the DOM if the condition is true.

python

If the condition evaluates to false (i.e., tasks.length === 0), Angular doesn't render the element at all — it's completely absent from the DOM.

But what if you want to show a fallback message instead of simply hiding the content? That's where the else clause of *ngIf comes in handy. It allows you to reference an alternative template using an <ng-template> with a custom label.

Here's what happens:

• Angular first checks if the tasks array has any items;

• If it does, it renders the <div> with the task components;

• If the array is empty, it uses the #noTasks template and displays the message: "No tasks yet 😊".

This makes your templates much cleaner and helps manage empty states in a user-friendly way.