Angular Directives

Angular provides a variety of directive types that can be used to manipulate the DOM, create reusable components, and add functionality to your Angular application. Here is a brief overview of all the directive types in Angular:

 

Component Directives

Components are the building blocks of an Angular application. They are used to create reusable UI components with their own template, styles, and logic. Components are the most commonly used directive type in Angular and can be defined using the @Component decorator. Here is an example:

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

@Component({ 
  selector: 'app-example', 
  template: '<div>Hello World!</div>' 
})
export class ExampleComponent {}

 

Attribute Directives

Attribute directives are used to add or remove behavior from an existing element. They are often used to modify the appearance or behavior of HTML elements. Attribute directives are defined using the @Directive decorator with a selector property that targets a specific attribute of an element. Here is an example:

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

@Directive({ 
  selector: '[appHighlight]' 
})
export class HighlightDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

In this example, the HighlightDirective adds a yellow background color to any element that has the appHighlight attribute.

 

Structural Directives

Structural directives are responsible for changing the layout of the DOM by adding, removing, or manipulating elements. They are denoted by the * symbol and are used to create and remove elements conditionally. There are three built-in structural directives in Angular: ngIf, ngFor, and ngSwitch.

ngIf

The ngIf directive is used to add or remove an element from the DOM based on a condition. For example, if a user is logged in, you can display a specific message by using the ngIf directive. Here is an example:

<div *ngIf="isLoggedIn">Welcome back!</div>

 

ngFor

The ngFor directive is used to display a collection of data by repeating a template for each item in the collection. For example, you can use ngFor to display a list of items in an e-commerce site. Here is an example:

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

 

ngSwitch

The ngSwitch directive is used to conditionally display content based on a set of cases. It's similar to a switch statement in other programming languages. Here is an example:

<div [ngSwitch]="color">
    <div *ngSwitchCase="'red'">Red</div>
    <div *ngSwitchCase="'blue'">Blue</div>
    <div *ngSwitchDefault>Unknown color</div>
</div>

 

Attribute Directives

Attribute directives are responsible for changing the appearance or behavior of an existing element. They are denoted by the square brackets [] and can be used to add or remove attributes, change the style of an element, and more. There are several built-in attribute directives in Angular, including ngClass, ngStyle, and ngModel.

ngClass

The ngClass directive is used to dynamically add or remove CSS classes to an element. Here is an example:

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

 

ngStyle

The ngStyle directive is used to dynamically add or remove CSS styles to an element. Here is an example:

<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize }">This text has a dynamic style.</div>

 

ngModel

The ngModel directive is used to bind the value of an input field to a variable. Here is an example:

<input [(ngModel)]="name" type="text" placeholder="Enter your name"> <p>Your name is {{ name }}</p>

 

In conclusion, Angular provides several types of directives that can be used to add behavior and functionality to an application. Components are the most commonly used directive type, but attribute, structural, custom, and built-in directives are also important. By understanding the different directive types, you can create more powerful and flexible applications in Angular.