Directives in Angular 7

Directives

Directives are used to change the look and feel of the DOM. Directives basically a class with @Directive decorator. In Angular, there are 3 types of directive

1. Component Directive.

2. Structural Directive.

3. Attribute Directive.

1.Component Directive :

->Component is also a type of directive which contains Template, Style, and Logic. ->You can create the angular Application without components.

Example:

Let first create the component by executing the following command

ng g c demo

When you run the above command in the command line, you will get the following result-

● src/app/demo/demo.component.html

● src/app/demo/demo.component.spec.ts

● src/app/demo/demo.component.ts

● src/app/demo/demo.component.css

● src/app/app.module.ts

Let us check file structure in demo->

demo.component.ts

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

@Component{

selector: 'app-demo',

templateUrl: './demo.component.html',

styleUrls: ['./demo.component.css']

}) _{export class DemoComponent implements OnInit {}

constructor() { } ngOnInit() { }

}

● A component selector is a css selector that tells how angular finds this particular component in html page

● templateUrl is path or url of a template file for an angular component

● StyleUrls one or more path or url for files containing css to use in this component

● Inside the @component decorator, we can use template instead of templateUrl and style instead of styleUrls

● A template is an inline html for an angular component

● style is an inline css

demo.component.html

<p>

demo works!

</p>

2.Structural Directive :

Structural directive basically used for HTML layout. Structural directive change the DOM element by adding or removing the elements from the dom. All Structural directive starts with asteriks(*) sign. For Example *ngIf , *ngFor, etc.

Example

1. _{<p *ngIf=”true”>} This paragraph add in the dom when *ngIf true </p>

<p *ngIf=”false”> This paraghraph does not add in the dom when *ngIf false </p>

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

@Component{

selector: 'app-demo',

templateUrl: './demo.component.html',

styleUrls: ['./demo.component.css']

}) _{export class DemoComponent implements OnInit {}

data = [1,2,3,4,5,6];

constructor() { } ngOnInit() { }

} _<ul> <li *ngFor=”let item of data ”>

{{item}} </li> </ul>

3.Attribute Directive :

An attribute directive is used to change the appearance of a DOM element or component. For Example ngStyle and ngClass.

->NgStyle is used to change the javascript object into the style attribute. ->NgClass is used to translate the object into the class attribute.

Example

<p [ngStyle]=”{‘color’:’red’}’’> Paraghraph with red color </p>

<p [ngClass]=”{‘my-class’:isTrue}’’>

When the isTrue variable contains the true value then my-class add on the p tag </p>

How to Create Custom Directives?

In this topic, we create a custom directive and use it with the component to change the text.

The command for generating the custom directive

ng generate directive directiveName

OR _{ng g d directiveName}

Example

ng g d changeTextDirective

● src/app/change-text-directive.directive.spec.ts

● src/app/change-text-directive.directive.ts

● src/app/app.module.ts

change-text-directive.directive.ts

// Step -1-> import { Directive, ElementRef} from '@angular/core';

// Step -2-> @Directive({

selector: '[appChangeTextDirective]' })

// Step -3-> export class ChangeTextDirectiveDirective {

constructor(Element: ElementRef) {

Element.nativeElement.innerText = "Text is changed by change Directive.";

} } _{demo-cmp.component.html}

<p appChangeTextDirective>

demo-cpm works!

</p>