Directive in Angular 17

Directives are classes that add additional behavior to elements in your Angular applications. Use Angular’s built-in directives to manage forms, lists, styles, and what users see.
A set of classes used for adding some additional behavior to the element the components of the Angular Application.
Example: – Adding/Removing an element from the DOM

Types of Directives

1. Structural Directives
2. Attribute Directives
3. Component
4. Custom Directives

1. Structural Directives: – Responsible for shaping & reshaping the DOM structure by handling tasks like adding, removing & manipulating the element. EX– *ngIf, *ngFor, *ngSwitch
   • These directives are generally used to manipulate DOM elements.
   • Every structural directive has a “*” (till Angular 16) or “@” (in Angular 17) sign before them

Example1 :- How to use *ngIf else

Let assume showContent is a boolean variable. If showContent is true then content is visible else content is hidden.
Angular 2 – 16

<div *ngIf="showContent; else hideContent">
    Content is visible
</div>
<ng-template #hiddenContent>
    <div>
        Content is hidden
    </div>
</ng-template>

Angular 17

@if(showContent){
  <div>
      Content is visible
  </div>
} @else{ 
   <div>
      Content is hidden
   </div> 
}

Example2 :- How to use *ngFor

Let assume fruitList have list of the fruit
Angular 2 – 16

<div *ngFor="let fruit of fruitList">
    <ul>
        <li>{{fruit }}</li>
    </ul>
</div>

Angular 17

@for(fruit of fruitList; track $index) {
   <ul>
       <li>{{fruit}}</li>
   </ul>
   } @empty {
       Empty list of fruits
   }

2. Attribute Directives: – Responsible for changing the behavior or appearance of HTML elements. Example: – ngClass, ngStyle, ngModel

• • These directive are used to change the look and behavior of a DOM element.

Example1 :- How to use ngClass

Let assume In the template, add the ngClass property binding to currentClasses to set the element’s classes:
Angular 2-17

<div [ngClass]="currentClasses"> Added new classes</div>

Example2 :- How to use ngStyle

Let assume To set the element’s styles, add an ngStyle property binding to currentStyles.
Angular 2-17

<div [ngStyle]="currentStyles">
      Added style in div
</div>

3. Component: – Responsible for controlling the rendering of the Angular components in the template.

• • These form the main class in directives. Instead of @Directive decorator we use @Component decorator to declare these directive.
  • These directives have a view, a stylesheet and a selector property.
  • An HTML template that declares what renders on the page. A TypeScript class that defines behavior. A CSS selector that defines how the component is used in a template. Optionally, CSS styles applied to the template.

Example: –

@Component({
       selector:'app-selector',
       templateUrl:'./app.component.html',
       styleUrls:['./app.component.css'] 
})

4. Custom Directive: – Custom directive is not standard directive. They are created by the user for defining a new behavior of the elements or extending some functionality.

Example: – Let asume when call appBlueBackGround Directive then change the background color of div

import { Directive, ElementRef } from '@angular/core
 
@Directive({
     selector:'[appBlueBackGround]' 
})
 
export class BlueBackGroundDirective{
     constructor(el:ElementRef){
     el.nativeElement.style.backgroundColor="blue"; 
    } 
}

That’s all.