Angular Directives

Directives in Angular are instructions added to the DOM, which modify the appearance or behavior of elements. There are two main types of directives: structural and attribute directives.

Structural Directives:

Structural directives change the layout by adding or removing elements from the DOM.

1. ngIf Directive:Displays an element only when a certain condition is true. Example:

<div *ngIf="isLoggedIn">Welcome, User!</div>        

ngFor Directive:

• Iterates over a list of data and generates an element for each item.
• Example:

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

ngSwitch Directive:

• Displays one element from a set of elements based on a matching condition.
• Example:

<div [ngSwitch]="userRole">
  <p *ngSwitchCase="'admin'">Admin View</p>
  <p *ngSwitchCase="'user'">User View</p>
  <p *ngSwitchDefault>Guest View</p>
</div>        

Attribute Directives:

Attribute directives change the appearance or behavior of an existing element.

1. ngClass Directive:Dynamically applies or removes a CSS class based on a condition.Example:

<div [ngClass]="{ 'active': isActive }">This is a dynamic class example.</div>        

Read More: https://www.hqledutech.com/a-beginners-guide-to-angular-modern-web-development-simplified-lesson-3/