Directives in Angular

Directives in Angular are markers on a DOM element that tell the Angular compiler to attach a specific behaviour to that element or change its appearance or behaviour. They are a way to extend HTML and make it more dynamic and interactive. Directives play an important role in separating concerns, promoting code reusability and improving the flexibility of Angular applications.

Types of Directives in Angular:

Component directives are the most common type of directives in Angular. They are used to create reusable, encapsulated user interface components with their patterns, styles, and behaviours. Components are commonly used as custom elements in HTML code and can have their inputs, outputs, and lifecycle hooks.
Attribute Directives allow you to modify the behaviour or appearance of elements by attaching them as attributes in HTML. They enable you to manipulate attributes, add or remove classes, modify styles, and interact with elements in various ways.

Below are a few frequently used built-in attribute directives:

1) ngClass

The ngClass directive allows you to conditionally apply CSS classes to an element based on certain conditions. It accepts an object, an array, or a string as its input and applies the corresponding CSS classes to the host element.
```
  <div [ngClass]="{ 'active': isActive, 'error': hasError }">Content</div>
```
2) ngStyle

The ngStyle directive enables you to dynamically apply inline styles to an element based on certain conditions. It accepts an object or a key-value pair as its input, where the keys represent CSS style properties, and the values represent their corresponding values.
```
  <div [ngStyle]="{ 'color': textColor, 'font-size.px': fontSize }">Content</div>
```
3) ngModel

The ngModel directive is used to display a data property and update that property when the user makes changes.
```
  <input [(ngModel)]="name" id="nameInput">
```
Structural directives are responsible for altering the structure of the DOM by adding or removing elements based on certain conditions. They use a specific syntax to conditionally render or remove elements.

Below are a few frequently used built-in structural directives:

1) ngIf

The ngIf directive conditionally renders an element and its content based on a given expression. If the expression evaluates to true, the element is rendered; otherwise, it is removed from the DOM.
```
  <div *ngIf="showContent">Content</div>
```
2) ngFor

The ngFor directive allows you to iterate over a collection and generate dynamic content for each item in the collection. It creates a template for each item, rendering the template with the corresponding data.
```
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
```
3) ngSwitch

The ngSwitch directive provides a way to conditionally render elements based on a specific value. It works similarly to a switch statement, evaluating multiple cases and rendering the corresponding element based on the matched case.
```
  <div [ngSwitch]="color">
    <div *ngSwitchCase="'red'">Red Color</div>
    <div *ngSwitchCase="'blue'">Blue Color</div>
    <div *ngSwitchDefault>Default Color</div>
  </div>
```

Directives in Angular

Did you find this article valuable?