What are directives in Angular

 Directives are a powerful feature in Angular that allow you to extend and manipulate the DOM (Document Object Model) in various ways. They are a fundamental part of Angular's architecture and provide a way to create reusable components, apply behavior to elements, and manipulate the DOM based on certain conditions or events. There are three types of directives in Angular:

1. Component Directives:

Components themselves are a type of directive in Angular. They are the most common and powerful directive type, combining a template (HTML), styles (CSS), and behavior (Typescript) into a reusable component.

• Purpose: To create custom, reusable HTML elements (components) with their own behavior and UI.
• Usage: Declared with @Component decorator.
• Example:
  

import { Component } from '@angular/core';

@Component({

  selector: 'app-custom',

  templateUrl: './custom.component.html',

  styleUrls: ['./custom.component.css']

})

export class CustomComponent {

  // Component logic goes here

}

2. Attribute Directives:

Attribute directives modify the appearance or behavior of an element, component, or another directive.

• Purpose: To change the appearance or behavior of a DOM element, component, or another directive.

• Usage: Applied to elements as attributes.

• Example: Angular provides built-in attribute directives like ngClass, ngStyle, and ngModel.

<!-- Example of ngClass directive -->

<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">...</div>

3. Structural Directives:

Structural directives alter the DOM layout by adding or removing DOM elements based on conditions.

• Purpose: To conditionally add or remove elements from the DOM.

• Usage: Applied to elements with a leading * in their syntax.

• Example: Angular provides built-in structural directives like *ngIf, *ngFor, and *ngSwitch.

<!-- Example of ngIf directive -->

<div *ngIf="isVisible">...</div>

<!-- Example of ngFor directive -->

<ul>

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

</ul>

Key Points:

• Reusable: Directives promote code reusability by encapsulating behavior and DOM manipulations.
• Scope: They operate within the scope of their parent component or directive.
• Customization: Angular allows developers to create custom directives to extend the framework's functionality based on specific project needs.
• Lifecycle Hooks: Directives can also implement lifecycle hooks (ngOnInit, ngOnChanges, etc.) to perform initialization, cleanup, or react to changes.

Directives are essential for creating dynamic and interactive web applications in Angular, providing a way to enhance HTML with additional behavior and functionality beyond what plain HTML and CSS offer.