Structural vs attribute directives in Angular - Hands-On Comparison

Structural vs Attribute Directives in Angular

📖 Scenario: You are building a simple Angular component that shows a list of fruits. You want to learn how to use structural directives to control what is shown and attribute directives to style elements.

🎯 Goal: Create an Angular component that uses a structural directive *ngIf to show a message when the fruit list is empty, and an attribute directive [style.color] to color the fruit names.

📋 What You'll Learn

Create a component with a list of fruits

Add a boolean variable to control if the list is empty

Use *ngIf to show a message when the list is empty

Use an attribute directive to color the fruit names in green

💡 Why This Matters

🌍 Real World

Structural directives like *ngIf and *ngFor help show or hide parts of the page or repeat elements. Attribute directives change how elements look or behave. These are common in Angular apps to build dynamic user interfaces.

💼 Career

Understanding structural and attribute directives is essential for Angular developers to create interactive and well-styled web applications.

1

Set up the fruit list

Create a component property called fruits and set it to the array ["Apple", "Banana", "Cherry"].

Angular

// Create a property called fruits with the array ["Apple", "Banana", "Cherry"]

Need a hint?

Use fruits = ["Apple", "Banana", "Cherry"] inside your component class.

2

Add a boolean to control empty list

Add a boolean property called isEmpty and set it to false.

Angular

fruits = ["Apple", "Banana", "Cherry"]
// Add a boolean property called isEmpty and set it to false

Need a hint?

Use isEmpty = false inside your component class.

3

Use *ngIf to show empty message

In the component template, use the structural directive *ngIf="isEmpty" on a <p> tag to show the text "No fruits available" when isEmpty is true.

Angular

fruits = ["Apple", "Banana", "Cherry"]
isEmpty = false

 tag with *ngIf="isEmpty" that shows 'No fruits available' -->

Need a hint?

Use <p *ngIf="isEmpty">No fruits available</p> in your template.

4

Use attribute directive to color fruit names

In the template, use *ngFor="let fruit of fruits" on a <li> tag to list each fruit. Add an attribute directive [style.color]="'green'" to color the fruit names green.

Angular

fruits = ["Apple", "Banana", "Cherry"]
isEmpty = false

No fruits available

 with fruit -->

Need a hint?

Use <li *ngFor="let fruit of fruits" [style.color]="'green'">{{ fruit }}</li> inside a <ul>.