What are directives in angular and types of directive in angular

We can attach extra attributes to the markup language parts (elements) which may helps you manipulate the looks of web page. 

You know , the components are the building blocks of an angular applications because of directives, components are nothing more than a directive with a templet.

Components have their own templets whereas angular directive has directions to vary visual illustration and rendering the template. Angular 12 is released, grasp what is new in it 

Type of directives in angular

There are three types of directives in angular. 

• Components directive – directive with template
• Attribute directive – change the appearance and behavior of DOM element
• Structural directive – change layout by adding or removing DOM element

Component directive

Component directives are most commonly used directives in angular that is why components are one of core building blocks in angular.

As components directive has their own template and attributes so that they can easy be managed changing the appearance of DOM elements. 

It is mandatory to import declare the component directive in module.

errorMessage.directive.ts

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

@Directive({
    selector:'[error-message]'
})

export class ErrorMessageDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

app.component.html

<p error-message>
   Hi , my color was changed by angular directive
</p>

Do not forget to declare error-message directive in app.module.ts

Results

Like the above example, we made a custom directive to apply red background for errors in angular application and then we can simply put the directive in DOM elements which element to want with red background.

Attribute Directive

Attribute directive are used to change the appearance and the behavior of DOM element where Angular provides built in attribute directives like NgStyle NgClass ,

Where we can change the styling of DOM element dynamically basis of some conditions.

Simply Attribute directives are used for conditional styling in angular with 

• ngStyle directive
• ngClass directive

NgStyle Directive

ngstyle directive is used to style HTML elements where we give some condition into ngStyle so it can then apply desired changes.  

Example:

app.component.html

<div [ngStyle]="{'border':isConditionMatch ? '4px solid green' : '5px solid red' }"> 
  ngStyle Example
<div>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  isConditionMatch = true;
}

Result:

In the above example we set a border on text “ngstyle example” conditionally using ngStyle directive.

.custom-class {
  border: 3px solid green
}

<div [ngClass]="isConditionMatch ? 'custom-class' : '' ">ngStyle Example<div>

Structural Directive

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: 
  `<h1 *ngIf="1 < 2" >tag 1</h1>
  <h1 *ngIf="false" >tag 2</h1>
  <h1 *ngIf="property" >property</h1>
  <h1 *ngIf="nullValue" >null</h1>`,
})
export class AppComponent  {
  property = true;
  nullValue = null;
 }

Output:

ngIf directive

2. NgFor

app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'ngfor-grouped-example',
  templateUrl: './grouped-example.component.html',
  styleUrls: ['./grouped-example.component.css']
})
export class GroupedExampleComponent  {

   peopleByCountry: any[] = [
    {
      'country': 'UK',
      'people': [
        {
          "name": "Douglas  Pace"
        },
        {
          "name": "Mcleod  Mueller"
        },
      ]
    },
    {
      'country': 'US',
      'people': [
        {
          "name": "Day  Meyers"
        },
        {
          "name": "Aguirre  Ellis"
        },
        {
          "name": "Cook  Tyson"
        }
      ]
    }
  ];
}

app.component.html

<ul *ngFor="let group of peopleByCountry">
  <li>{{ group.country }}</li>
  <ul>
    <li *ngFor="let person of group.people">
      {{ person.name }}
    </li>
  </ul>
</ul>

Output

ngFor directive

3. ngSwitch

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  positions:Array<Object> = [
    {
      id: 101,
      name: 'CEO'
    },
    {
      id: 102,
      name: 'CFO'
    },
    {
      id: 103,
      name: 'CTO'
    },
    {
      id: 104,
      name: 'CMO'
    }
  ]
}

Outputfour

 

4. ngIf-else

ngIfElse is amazing directive where we can have both cases, we can show matched expression value Html element as well as the else case to show any other element.

But we need to define the element so that if can be render after matching the expression.

<input [(ngModel)]="showContent" type="checkbox"/> Show My Secret Message
<hr />
<div *ngIf="showContent; else message">
  Hello Angular 12!
</div>
<ng-template #message>
  Click the checkbox above to read the secret message!
</ng-template>

Ouput:

Angular 12 just released, know what’s new in it 

Summary

In this article, we have focused on angular directive , we have covered three types of directives in angular where ngClass and ngStyle may have more than one expression to provide appearance and behavior to DOM elements.

In conclusion,directive is Angular is a powerful tool that allows you to create custom HTML tags. Directive allows you to manipulate the behavior of an element, and add your own custom functionality.

Directive can be used to create custom form controls, or to create new HTML tags that have special meaning in your application.

If you want some custom features then angular provides us a way to do that by custom directives where we can have our own logic to change the behavior of HTML elements.

If we talk about ngif directive then we pass match multiple expressions at once so that the DOM element can be rendered matching the conditions.

If you enjoyed the article , considering following , thanks!