Angular provides three main types of directives:

• Component Directives: These directives create reusable components with their own view templates and logic. They are the most common type of directive used in Angular applications.
• Structural Directives: These directives affect the structure of the DOM by adding, removing, or manipulating elements. Examples include *ngIf, *ngFor, and *ngSwitch.
• Attribute Directives: These directives alter the appearance or behavior of existing HTML elements by changing their attributes. Examples include ngClass, ngStyle, and ngModel.

Using Directives

Directives are used by adding them as attributes to HTML elements. They are usually preceded by a prefix, typically * for structural directives and ng for attribute directives.

<<div *ngIf="showWelcomeMessage">
  Welcome to Angular!
</div>

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">
  This button is {{ isActive ? 'active' : 'inactive' }}
</div>

Here, *ngIf is a structural directive that conditionally displays the <div> element, while [ngClass] is an attribute directive that dynamically applies classes based on the isActive variable.

Common Directives

Some commonly used directives in Angular include:

• *ngIf: Conditionally shows or hides an element.
• *ngFor: Iterates over an array and creates a new element for each item.
• *ngSwitch: Provides a switch-case like functionality for displaying elements based on a variable's value.
• [ngStyle]: Applies CSS styles dynamically to an element.
• [ngModel]: Two-way data binding, connecting form elements to component data.