Angular 7 | Directives - GeeksforGeeks

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:  
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.  
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']})
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.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:  
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.
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.
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']}
Template file:  
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>
Output:  
Output:  
 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:  
 
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 

Directive:  
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() {  }}
The Component File:  
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() {  }}
The Template  
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>
Output: Before clicking the Button:  
Output: Before clicking the Button:  
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.
bunnyram19
AngularJS-Directives
AngularJS-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
Auth Guards in Angular 9/10/11
How to bundle an Angular app for production?
How to set focus on input field automatically on page load in AngularJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
HTML Cheat Sheet - A Basic Guide to HTML
How to update Node.js and NPM to next version ?