Directives in Angular 7 - Study24x7
Social learning Network


New to Study24X7 ?

 Join Now

Directives in Angular 7

Updated on 15 February 2020
Angular Programming
7 min read 3 views
Updated on 15 February 2020


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.


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->


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


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 works!


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.


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';


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.


<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


ng g d changeTextDirective

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

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

● src/app/app.module.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!


Write a comment...
  • Taufik Alam
  • Nice explanation
    Related Posts