Learn About Directives In Angular

Introduction

 

In this article, we will see how the different types of directives work in Angular.

 

Angular has three types of directives.

1. Component
2. Structural
3. Directives

Component directives have their own template. It is identified by @Component decorator that defines the class defined is component class. We can define a component view with its template. Template tells Angular how to render the component.

 

Structural directives are used to change the structure of the HTML element. An * is added in the directive attribute name. It is helpful to shape/reshape the DOM’s structure by manipulating the elements. We can use one structural directive for a particular host element.

 

Attribute Directives are used to change the behavior of the DOM element. It uses @Directive annotation decorated on the class.

 

Let’s have an example with the use of component, structure, and attribute directive used in Angular.

• Create an Angular project.
• Create a test component.
  
  Ng g c testDirective
  
  

• Create a directive.
  
  Ng g c mydir
  
  

Open my-dir.directrive.ts and add/modify with the below conent.

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

@Directive({
  selector: '[appMyDir]'
})
export class MyDirDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.background='red';
    el.nativeElement.style.width='200px';
  }
}

Open test-directive.component.ts and modify with the below content.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-test-directive',
  templateUrl: './test-directive.component.html',
  styleUrls: ['./test-directive.component.css']
})
export class TestDirectiveComponent implements OnInit {
  @Input('name') name : string;
  @Input('phone') phone : string;
  constructor() {}

  ngOnInit() {
  }
}

Open test-directive.component.html and add the below content.

{{name}} : {{phone}}
<p appMyDir>This text is under custom directive decorated by @directive</p>

Open app.component.ts and modify with the below code.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'DirectivesDemo';
  isVisible : boolean;
  personStyle : any;

  constructor(){
    this.isVisible = true;
    this.personStyle = {
      'color' : 'white',
      'background-color' : 'grey',
      'width' : '200px'
    }
  }
}

Open app.component.html and add the below code.

<app-test-directive
  [name] = '"Mohammad Irshad"'
  [phone] = '"7860000000"'
  *ngIf="isVisible"
  [ngStyle]="personStyle"
></app-test-directive>

Angular CLI will automatically add the components in declarations.

 

Open app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PersonComponent } from './person/person.component';
import { TestDirectiveComponent } from './test-directive/test-directive.component';
import { MyDirDirective } from './my-dir.directive';

@NgModule({
  declarations: [
    AppComponent,
    TestDirectiveComponent,
    MyDirDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We have used attribute directives that we have created as custom attribute directive ‘appMyDir’ under TestDirectiveComponent.

 

TestDirectiveComponent has been used under appComponent.

 

We have used the structural directive *ngIF that is provided by Angular as it is a structural directive and [NgStyle] attribute directive that is also provided by Angular.

 

Run the application. You will see the output defined by directives element.

 

So, we are done with the explanation of different types of directives.