Directives in Angular 7 - Study24x7
Social learning Network

Welcome Back

Get a free Account today !

or

Directives in Angular 7

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

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>

study24x7
Write a comment...
  • Taufik Alam
  • Nice explanation