Skip to content
Related Articles

Related Articles

Improve Article

Angular 7 | Directives

  • Last Updated : 24 Sep, 2020

Directives in Angular 7 are Typescript class which is declared with decorator @Directive. These are the Document Object Model (DOM) instruction sets, which decide how logic implementation can be done.
Angular directives can be classified into three types: 
 

  1. Component Directives: It forms the main class and is declared by @Component. It contains the details on component processing, instantiated and usage at run time.
    Example: It contains certain parameters some of them are shown in this example. 
     

javascript




@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  1. There are three parameters discussed below: 
    • Selector: Tells the template tag which specifies the beginning and end of the component.
    • templateURL: Consists of the template used for the component.
    • styleUrls: It is of array type which consists of all the style format files used for the template.
  2. Structural Directives: Structure directives manipulate the DOM elements. These directives have a * sign before the directive. For example, *ngIf and *ngFor.
    Example: Let’s look the implementation of *ng-if-else and *ng-for. Using them, we classify weekdays and weekends. 
    Component file: 
     

javascript




import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Weekdays:Array =[
'Sunday', 'Monday', 'Tuesday',
'Wednesday', 'Thursday', 'Friday', 'Saturday']
}
  1. Template file: 
     

html




<div *ngFor="let day of Weekdays">
<ng-container *ngIf =
    "(day == 'Saturday' || day == 'Sunday'); else elseTemplate">
  <h1>{{day}} is a weekend</h1>
</ng-container>
<ng-template #elseTemplate>
  <h1>{{day}} is not a weekend</h1>
</ng-template>
</div>
  1. Output: 
     



  1.  
  2. Attribute Directives: Attribute directives are used to change the look and behavior of the DOM element. It provides the facility to create our own directive. 
    Example: This example describes how to make our own directive.
    Write command as follows: 
     
ng g directive 
  1. Directive: 
     

javascript




import { Directive, ElementRef, OnInit } from '@angular/core';
 
@Directive({
  selector: '[appChanges]'
})
export class ChangesDirective {
  constructor(private eltRef: ElementRef) {
 
    // Changing the background to green
    this.eltRef.nativeElement.style.backgroundColor = 'green';
    this.eltRef.nativeElement.style.color = 'white';
    changing the text color to white
  }
   
  ngOnInit() {
  }
}
  1. The Component File: 
     

javascript




import { Component, OnInit, Directive } from '@angular/core';
import { ChangesDirective } from '../changes.directive';
 
@Component({
  selector: 'app-derived-directive',
  templateUrl: './derived-directive.component.html',
  styleUrls: ['./derived-directive.component.css']
})
 
export class DerivedDirectiveComponent implements OnInit {
 
  isClicked:boolean=false;
  constructor() { }
  buttonClick(){
 
    // Change controlled by button press
    this.isClicked = true;
  }
  ngOnInit() {
  }
}
  1. The Template 
     

html




<button>Click Here</button>
  
    <div style="width: 220px;height: 50px">
        <h1>GeeksForGeeks</h1>
    </div>
 
 
    <div style="color: green;width: 300px;height: 50px">
        <h1> GeeksForGeeks</h1>
    </div>
  1. Output: 
    • Before clicking the Button: 
       

  • After clicking the Button: 
     

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :