Angular Directives

In Angular, directives are a powerful feature that allows us to extend HTML with custom behaviour and create reusable components.

They provide a way to encapsulate and manipulate the Document Object Model (DOM) in a declarative manner.

Uses of Directives in Angular:

Creating Reusable Components: Directives are commonly used to create reusable components with encapsulated behaviour, logic, and styling.
Manipulating DOM Elements: Attribute directives are used to manipulate DOM elements by applying custom behaviour or styles based on attribute values.
Conditional Rendering: Structural directives like `*ngIf` and `*ngFor` are used to conditionally render elements or components in the DOM based on application logic or data.
Styling Elements Dynamically: Directives such as `ngClass` and `ngStyle` enable dynamic styling of elements based on component properties or conditions.
Interacting with User Input: Directives can be used to handle user input events such as `clicks`, `key presses`, and form submissions.

Types of Directives in Angular:

Structural Directives
Attribute Directives
Component Directives

Structural Directives:

Structural directives modify the structure of the DOM by adding, removing, or manipulating elements.

They are prefixed with an asterisk (*) in the template syntax.

*ngIf

The "*ngIf" directive conditionally adds or removes elements from the DOM based on an expression.

Example:

<div *ngIf="isVisible">Visible when isVisible is true</div>

*ngFor

Example:

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

The "*ngFor" directive iterates over a list and generates HTML elements for each item.

Attribute Directives:

Attribute directives change the appearance or behaviour of an element. They are applied to elements as attributes.

Example:

<div [ngClass]="{'active': isActive, 'highlight': isHighlighted}">
  Dynamic Classes
</div>

ngClass

Example:

<div [ngStyle]="{'color': isActive ? 'green' : 'red', 'font-size.px': fontSize}">
  Dynamic Styles
</div>

The "ngClass" directive dynamically adds or removes CSS classes based on expression evaluation.

ngStyle

The "ngStyle" directive applies inline styles to an element based on expression evaluation.

Example:

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

@Component({
  selector: 'app-employee-component',
  template: '<p>Hello, World!</p>'
})
export class EmployeeComponent {}

Component Directives:

Component directives are Angular components with a template. They encapsulate HTML, CSS, and behaviour into reusable components.

Custom Component

Define a custom component with "@Component" decorator.

In HTML File

Example:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Example:

<app-employee-component></app-employee-component>

Creating Custom Directives:

We can also create custom directives to encapsulate behaviour and apply it to HTML elements.

Custom Attribute Directive

Create a custom attribute directive to highlight elements on hover.

In HTML File

<p appHighlight>Highlight me on hover!</p>

<-- Angular Expression

Angular DOM -->