In Angular, directives are special markers in the DOM that tell Angular to do something to that DOM element (or even the component). Built-in directives are provided by Angular to help you manipulate the DOM easily. This section will cover the most commonly used built-in directives: ngIf, ngFor, ngSwitch, ngClass, and ngStyle.

1. Directives: Instructions in the DOM that tell Angular to perform specific actions.
2. Structural Directives: Change the structure of the DOM by adding or removing elements (ngIf, ngFor, ngSwitch).
3. Attribute Directives: Change the appearance or behavior of an element (ngClass, ngStyle).

The ngIf directive conditionally includes or excludes an element in the DOM based on a boolean expression.

Example:

Explanation:

• *ngIf="isVisible": The element will be included in the DOM only if isVisible is true.

The ngFor directive is used to repeat a portion of the DOM tree for each item in a list.

Example:

Explanation:

• *ngFor="let item of items": Iterates over the items array and creates a <li> element for each item.

The ngSwitch directive is used to conditionally display one of several elements based on a switch expression.

Example:

Explanation:

• [ngSwitch]="color": The switch expression.
• *ngSwitchCase="'red'": Displays this element if color is 'red'.
• *ngSwitchDefault: Displays this element if no other case matches.

The ngClass directive adds or removes CSS classes on an element based on an expression.

Example:

Explanation:

• [ngClass]="{ 'active': isActive, 'disabled': isDisabled }": Adds the active class if isActive is true and the disabled class if isDisabled is true.

The ngStyle directive adds or removes inline styles on an element based on an expression.

Example:

Explanation:

• [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }": Sets the color style to textColor and the font-size style to fontSize in pixels.

Task: Create a button that toggles the visibility of a paragraph using ngIf.

Solution:

Explanation:

• The button toggles the isVisible variable.
• The paragraph is displayed only if isVisible is true.

Task: Display a list of items using ngFor.

Solution:

Explanation:

• Iterates over the items array and creates a <li> element for each item.

Task: Add a class to a div based on a condition using ngClass.

Solution:

Explanation:

• Adds the highlight class if isHighlighted is true.

• Common Mistake: Forgetting to use the asterisk (*) with structural directives like ngIf and ngFor.

  • Tip: Always use the asterisk (*) when using structural directives to indicate that the directive is modifying the structure of the DOM.

• Common Mistake: Using incorrect syntax for ngClass and ngStyle.

  • Tip: Ensure that the expressions inside ngClass and ngStyle are valid objects or arrays.

Built-in directives in Angular are powerful tools that allow you to manipulate the DOM easily. Understanding and using these directives effectively can greatly enhance the functionality and interactivity of your Angular applications. In the next section, we will explore custom directives, which allow you to create your own reusable directives to further extend Angular's capabilities.