In Angular, Directives are defined as classes that can add new behavior to the elements in the template or modify existing behavior. The purpose of Directives in Angular is to maneuver the DOM, be it by adding new elements to DOM or removing elements and even changing the appearance of the DOM elements. → https://www.simplilearn.com/what-are-directives-in-angular-article

Types of Directives

• Components - Used with a template. This type of directive is the most common directive type.

• Attribute - Change the appearance or behavior of an element, component, or another directive

• Structural - Change the DOM layout by adding and removing DOM elements.

https://angular.dev/guide/directives

Components

These are the most common directives in Angular. Components are directives with templates. They encapsulate a part of the user interface and often have associated logic. They are used to create reusable UI components. - https://medium.com/@ayushgrwl365/angular-directives-enhancing-user-interfaces-with-ease-bb99d74e69cd

Example:

https://angular.dev/guide/components

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
})
export class ProfilePhoto { }

Attribute

Attribute directives change the appearance or behavior of an element, component, or another directive. They are typically applied as attributes on HTML elements. Examples include ngClass, ngStyle, and ngModel. - https://medium.com/@ayushgrwl365/angular-directives-enhancing-user-interfaces-with-ease-bb99d74e69cd

Example:

• ngClass: Adds or removes a set of CSS classes.

    <div [ngClass]="{'highlight': isActive}">Content</div>
  

• ngStyle: Adds or removes inline styles dynamically.

    <div [ngStyle]="{'font-size.px': fontSize}">Text with dynamic size</div>
  

• ngModel: Binds data between the form control and the model (two-way data binding).

    <input [(ngModel)]="name" />
  

• ngModelOptions: Configures the behavior of ngModel, such as updating on blur or submitting forms.

    <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}" />
  

Structural

Structural directives modify the DOM structure by adding or removing elements. The most well-known structural directives are ngIf, ngFor, and ngSwitch. - https://medium.com/@ayushgrwl365/angular-directives-enhancing-user-interfaces-with-ease-bb99d74e69cd

Example:

ngIf

• Description: Conditionally includes or excludes elements from the DOM based on a Boolean expression.

• Example:

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

• else syntax: You can also provide an else template for when the condition is false.

    <div *ngIf="isVisible; else notVisibleTemplate">Visible content</div>
    <ng-template #notVisibleTemplate>Not visible content</ng-template>
  

ngFor

• Description: Repeats a part of the DOM for each item in a collection.

• Example:

    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  

• Indexing and Loop Control: You can also use local variables like index, first, last, etc.

    <li *ngFor="let item of items; let i = index">Index: {{ i }} - {{ item }}</li>
  

ngSwitch, ngSwitchCase, ngSwitchDefault

• Description: Conditionally swaps the elements in the DOM based on the value of an expression.

• Example:

    <div [ngSwitch]="status">
      <div *ngSwitchCase="'active'">Active</div>
      <div *ngSwitchCase="'inactive'">Inactive</div>
      <div *ngSwitchDefault>Unknown status</div>
    </div>