Angular Directives Overview

Angular directives are a core feature of Angular that allows developers to extend HTML with custom behavior. They enable manipulation of the DOM (Document Object Model) and enhance the functionality of HTML elements.

Key Concepts

• Definition: Directives are special markers on a DOM element (like an element, attribute, or class) that instruct Angular to attach a specified behavior to that DOM element.
• Types of Directives:
  • Components: A directive with a template. It is the most common directive type that controls a part of the UI.
  • Structural Directives: Modify the structure of the DOM by adding or removing elements. Examples include:
    • *ngIf: Conditionally includes a template based on a boolean expression.
    • *ngFor: Repeats a template for each item in a list.
    • *ngSwitch: Switches between multiple templates based on a condition.
  • Attribute Directives: Alter the appearance or behavior of an existing element. Examples include:
    • ngClass: Adds or removes CSS classes based on expressions.
    • ngStyle: Sets styles based on an expression.

How Directives Work

• Angular processes directives during the compilation phase, allowing them to modify the behavior of elements dynamically based on conditions or data changes.
• Directives can be created using the @Directive decorator, which allows you to define custom behavior.

Examples

Structural Directive Example

<div *ngIf="isVisible">This is visible</div>

• Here, the *ngIf directive will only render the <div> if isVisible is true.

Attribute Directive Example

<div [ngClass]="{'active': isActive}">This div may be active</div>

• The ngClass directive dynamically applies the active class based on the value of isActive.

Conclusion

Angular directives are essential for building dynamic and interactive web applications. Understanding how to use built-in directives and create custom ones is key to leveraging the full power of Angular.