Post
Ask Question

Learn Angular 4.0 In 10 Days - Directives - Day Four

Let us start the Day 4 of Learning Angular 4.0 in 10 Days. In the previous articles, we already discussed Data Binding Concept in Angular 4.0. If you want to read the previous articles of this series, do visit the below link.

A Directive modifies the DOM to change appearance, behavior or layout of DOM elements. Directives are one of the core building blocks Angular 4 uses to build applications. In fact, Angular 4 components are in large part directives with templates. From an Angular 1 perspective, Angular 4 components have assumed a lot of the roles directives used to. The majority of issues that involve templates and dependency injection rules will be done through components, and issues that involve modifying generic behavior is done through directives. There are three main types of directives in Angular 4:

  1. Component - directive with a template.
  2. Attribute directives - directives that change the behavior of a component or element but don't affect the template
  3. Structural directives - directives that change the behavior of a component or element by affecting how the template is rendered.

Before the Component API shipped in Angular 1.5, directives with templates that were used as elements were defined in a similar way as an attribute directive using the same API, which could lead to messy directive declarations that can be hard to grok. Components use the directive API under the hood, but give us a cleaner interface for defining them by hiding a lot of the defaults that would otherwise be cumbersome.

Component Vs Directives

Since as per the above list, component itself act as direcitves. So as a programmer, it is very common to assume that component and direcitves are the same. But actually it is not true. Below the comparison of the Directives and component.

Component Directives
A component is register with the @Component Decorator A Directives is register with the @Directives Decorator
Component is a directive which uses shadow DOM to create encapsulated visual behavior called components. Components are typically used to create UI widgets Directive is used to add behavior to an existing DOM element
Component is used to break up the application into smaller components. Directive is use to design re-usable components.
Only one component can be present per DOM element. Many directives can be used per DOM element.
@View decorator or templateurl template are mandatory in the component. Directive doesn't use View.

Attribute Directives

Attribute directives are a way of changing the appearance or behavior of a component or a native DOM element. Ideally, a directive should work in a way that is component agnostic and not bound to implementation details. Attribute directives actually modifies the appearance or behavior of an element. The attribute directive changes the appearance or behavior of a DOM element. These directives look like regular HTML attributes in templates. The ngModel directive which is used for two-way binding is an perfect example of an attribute directive. For create attribute directives, we always need to use or inject the below objects in our custom attribute directive component class. For creating an attribute directives, we have remember the below topics,

  1. Import required modules like Directives, ElementRef and Renderer from Angular core library
  2. Create a TypeScript Class
  3. Use @Directive decorator in the class
  4. Set the value of the selector property in @directive decorator function. The directive would be used, using the selector value on the elements.
  5. In the constructor of the class, inject ElementRef and Renderer object.

We are injecting ElementRef in the directive’s constructor to access the DOM element. We are also injecting Renderer in the directive’s constructor to work with DOM’s element style. We are calling the renderer’s setElementStyle function. In the function, we pass the current DOM element by using the object of ElementRef and setting the behavior or property of the current element. We can use this attribute directive by its selector in our component:

ElementRef

While creating custom attribute directive, we inject ElementRef in the constructor to access the DOM element. Actually elementref provide access to the underlying native element. ElementRef is a service that grants us direct access to the DOM element through its nativeElement property. That’s all we need to set the element’s color using the browser DOM API.

Renderer

While creating custom attribute directive, we inject Renderer in the constructor to access the DOM element’s style. Actually we call the renderer’s setElementStyle function. In this function, we pass the current DOM element with the help of ElementRef object and set the required attribute of the current element.

HostListener

Some times we may require to access input property within the attribute directive so that as per given attribute directive, we can apply related attribute within DOM Element. For trap user actions, we can call different methods to handle the user actions. To access the method for operate user actions we need to decorate the methods within the @HostListener method.

For example, Angular 4 has built-in attribute directives such as ngClass and ngStyle that work on any component or element.

NgStyle Directive

Angular 4 provides a built-in directive, ngStyle , to modify a component or element's style attribute. Here's an example,

  1. @Component({  
  2.     selector: 'app-style-example',  
  3.     template: `    
  4. <p style="padding: 1rem"    
  5. [ngStyle]="{    
  6.    'color': 'red',    
  7.    'font-weight': 'bold',    
  8.    'borderBottom': borderStyle    
  9.    }">    
  10. <ng-content></ng-content>    
  11.    </p>    
  12.    `  
  13.    })  
  14. export class StyleExampleComponent {  
  15.     borderStyle = '1px solid black';  
  16. }  
Notice that binding a directive works the exact same way as component attribute bindings. Here, we're binding an expression, an object literal, to the ngStyle directive so the directive name must be enclosed in square brackets. ngStyle accepts an object whose properties and values define that element's style. In this case, we can see that both kebab case and lower camel case can be used when specifying a style property. Also notice that both the html style attribute and Angular 4 ngStyle directive are combined when styling the element. We can remove the style properties out of the template into the component as a property object, which then gets assigned to NgStyle using property binding. This allows dynamic changes to the values as well as provides the flexibility to add and remove style properties.
  1. @Component({  
  2. selector: 'app-style-example',  
  3. template: `  
  4. <p style="padding: 1rem"  
  5.    [ngStyle]="alertStyles">  
  6.    <ng-content></ng-content>  
  7.    </p>  
  8. `  
  9. })  

  11. export class StyleExampleComponent {  
  12.    borderStyle = '1px solid black';  
  13.    alertStyles = {  
  14.       'color': 'red',  
  15.       'font-weight': 'bold',  
  16.       'borderBottom': this.borderStyle  
  17.    };  
  18. }  
NgClass Directive

The ngClass directive changes the class attribute that is bound to the component or element it's attached to. There are a few different ways of using the directive.

Binding a String

We can bind a string directly to the attribute. This works just like adding an html class attribute. In this case, we're binding a string directly so we avoid wrapping the directive in square brackets. Also notice that the ngClass works with the class attribute to combine the final classes.

  1. @Component({  
  2. selector: 'app-class-as-string',  
  3. template: `  
  4. <p ngClass="centered-text underlined" class="orange">  
  5. <ng-content></ng-content>  
  6. </p>  
  7. `,  
  8. styles: [`  
  9. .centered-text {  
  10. text-align: center;  
  11. }  
  12. .underlined {  
  13. border-bottom: 1px solid #ccc;  
  14. }  
  15. .orange {  
  16. color: orange;  
  17. }  
  18. `]  
  19. })  
  20. export class ClassAsStringComponent {  
  21. }  

Binding An Array

Here, since we are binding to the ngClass directive by using an expression, we need to wrap the directive name in square brackets. Passing in an array is useful when you want to have a function put together the list of applicable class names.

  1. @Component({  
  2. selector: 'app-class-as-array',  
  3.    template: `  
  4. <p [ngClass]="['warning', 'big']">  
  5.    <ng-content></ng-content>  
  6. </p>  
  7. `,  
  8. styles: [`  
  9.    .warning {  
  10.    color: red;  
  11.    font-weight: bold;  
  12.    }  
  13. .big {  
  14.    font-size: 1.2rem;  
  15.    }  
  16. `]  
  17. })  
  18. export class ClassAsArrayComponent {  
  19. }  

Binding An Object

Lastly, an object can be bound to the directive. Angular 4 applies each property name of that object to the component if that property is true. Here we can see that since the object's card and flat properties are true, those classes are applied but since dark is false, it's not applied. NgClass Directive

  1. @Component({  
  2. selector: 'app-class-as-object',  
  3. template: `  
  4. <p [ngClass]="{ card: true, dark: false, flat: flat }">  
  5.    <ng-content></ng-content>  
  6. <br>  
  7.    <button type="button" (click)="flat=!flat">Toggle Flat</button>  
  8. </p>  
  9. `,  
  10. styles: [`  
  11.    .card {  
  12.    border: 1px solid #eee;  
  13.    padding: 1rem;  
  14.    margin: 0.4rem;  
  15.    font-family: sans-serif;  
  16.    box-shadow: 2px 2px 2px #888888;  
  17.    }  
  18.    .dark {  
  19.       background-color: #444;  
  20.       border-color: #000;  
  21.       color: #fff;  
  22.    }  
  23. .flat {  
  24.    box-shadow: none;  
  25. }  
  26. `]  
  27. })  
  28. export class ClassAsObjectComponent {  
  29.    flat: boolean = true;  
  30. }  
Sample Code of app.component.attrdirective.ts
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.     moduleId: module.id,  
  5.     selector: 'attribute-directive',  
  6.     templateUrl: 'app.component.attrdirective.html',  
  7.     styles: [".red {color:red;}", ".blue {color:blue}", ".cyan {color : cyan}"]  
  8. })  
  9.   
  10. export class AttrDirectiveComponent implements OnInit {  
  11.     showColor: boolean = false;  
  12.   
  13.     constructor() { }  
  14.   
  15.     ngOnInit() { }  
  16.   
  17.     changeColor(): void {  
  18.         this.showColor = !this.showColor;  
  19.     }  
  20. }  
Sample Code of app.component.attrdirective.html
  1. <div>  
  2.     <strong>This is a Attribute Directives</h3>  
  3.     <span [class.red]="true">Attribute Change</span><br />  
  4.     <span [ngClass]="{'blue':true}">Attribute Change by Using NgClass</span><br />  
  5.     <span [ngStyle]="{'font-size':'14px','color':'green'}">Attribute Change by Using NgStyle</span>  
  6.     <br /><br />  
  7.     <span [class.cyan]="showColor">Attribute Change</span><br />  
  8.     <span [ngClass]="{'cyan':showColor}">Attribute Change by Using NgClass</span><br />  
  9.     <input type="button" value="Change Color" (click)="changeColor()" />  
  10.     <br /><br />  
  11.     <span [class.cyan]="showColor">Attribute Change</span><br />  
  12.     <span [ngClass]="{'cyan':showColor, 'red' : !showColor}">Attribute Change by Using NgClass</span><br />  
  13.     <br />  
  14. </div>  
Output



Sample Code of app.directive.blink.ts
  1. import { Directive, ElementRef, Input, Renderer } from '@angular/core';  
  2.   
  3. @Directive({  
  4.     selector: '[blink]'  
  5. })  
  6.   
  7. export class BlinkDirective {  
  8.   
  9.     constructor(el: ElementRef, renderer: Renderer) {  
  10.         setInterval(() => {  
  11.             let style = "hidden";  
  12.             if (el.nativeElement.style.visibility && el.nativeElement.style.visibility == "hidden") {  
  13.                 style = "visible";  
  14.             }  
  15.             renderer.setElementStyle(el.nativeElement, 'visibility', style);  
  16.         }, 750);  
  17.     }  
  18.   
  19. }  
Sample Code of app.component.blink.ts 
  1. import { Component } from '@angular/core'   
  2.   
  3. @Component({  
  4.     moduleId: module.id,  
  5.     selector: 'blink-demo',  
  6.     templateUrl: 'app.component.blink.html'  
  7. })  
  8. export class BlinkComponent {  
  9.     title: string;  
  10.     constructor() {  
  11.         this.title = 'Angular 4 Attribute Directive: Blink'  
  12.     }  
  13. }  
Sample Code of app.component.blink.html
  1. <div>  
  2.     <strong>{{ title }}</strong>  
  3.   
  4.     <strong>Here is a normal strong Tag</strong>  
  5.     <strong blink>And here is an example strong tag that blinks!</strong>  
  6.   
  7.     <p>This is a normal P Tag</p>  
  8.     <p blink>This is a P Tag with our Custom Attribute Directive</p>  
  9. </div>  
Output



Structural Directives

Attribute directives are a way of changing the appearance or behavior of a component or a native DOM element. Ideally, a directive should work. Structural Directives are a way of handling how a component or element renders through the use of the template tag. This allows us to run some code that decides what the final rendered output will be. Angular 4 has a few built-in structural directives such as ngIf , ngFor , and ngSwitch . Note: For those who are unfamiliar with the template tag, it is an HTML element with a few special properties. Content nested in a template tag is not rendered on page load and is something that is meant to be loaded through code at runtime. Structural directives have their own special syntax in the template that works as syntactic sugar.

  1. @Component({  
  2. selector: 'app-directive-example',  
  3. template: `  
  4. <p *structuralDirective="expression">  
  5. Under a structural directive.  
  6. </p>  
  7. `  
  8. })  

Instead of being enclosed by square brackets, our dummy structural directive is prefixed with an asterisk. Notice that the binding is still an expression binding even though there are no square brackets. That's due to the fact that it's syntactic sugar that allows using the directive in a more intuitive way and similar to how directives were used in Angular JS 1.

Angular 4 provides a built-in directive ngIf, ngFor and ngSwitch , to modify a component or element's style attribute.

ngIf

In Angular 1.x version, there was the ng-show and ng-hide directives which would show or hide the DOM elements on what the given expression evaluates by setting the display CSS property. In Angular 4.0, these two directives has been remove from the framework and introduced a new directive named ngIf. The main difference of ngIf directive over ng-show or ng-hide is that it actually remove the element or components entirely from DOM. For ng-show or ng-hide, angular keeps the DOM elements/components in the page, so any component behaviors may keep running even the component is not visible in the page. In Angular 4.0, ng-show or ng-hide directive is not available but we can obtain the same functionality by using the [style.display] property of any element. Now, one question always arise in our mind that why angular remove component or elements from DOM in case of ngIf directives? Actually, although in the earlier version, it hide or invisible the component or element, but still the elements or component attached with DOM. So it continues to fired its event listener. Also it keep changing while the model data has been change due to model binding. So in this way, this invisible components or elements uses resources which might be useful for some where else. The performance and memory burden can be substantial and the user may not be benefitted at all. Setting ngIf value to false does effect the component resource consumptions. Angular removes the element from DOM, stop the changes detection for the associated component, detaches it from DOM events and destroys the components. The component can be garbage collected and free up memory. Components often have child components which themselves have children. All of them has been destroys when ngIf destroys the common ancestor.

Sample Code of app.component.ngif.ts
  1. import { Component, OnInit, Input } from '@angular/core';  
  2.   
  3. @Component({  
  4.     moduleId: module.id,  
  5.     selector: 'toggle-text',  
  6.     templateUrl: 'app.component.ngIf.html'  
  7. })  
  8.   
  9. export class NgIfComponent implements OnInit {  
  10.     showInfo: boolean = false;  
  11.     caption: string = 'Show Text';  
  12.   
  13.     constructor() { }  
  14.     ngOnInit() { }  
  15.   
  16.     changeData(): void {  
  17.         this.showInfo = !this.showInfo;  
  18.         if (this.showInfo) {  
  19.             this.caption = 'Hide Text';  
  20.         }  
  21.         else {  
  22.             this.caption = 'Show Text';  
  23.         }  
  24.     }  
  25. }  
Sample Code of app.component.ngif.html
  1. <div>  
  2.     <input type="button" value="{{caption}}" (click)="changeData()"/>  
  3.     <br />  
  4.     <strong *ngIf="showInfo"><span>Demonstrate of Structural Directives - *ngIf</span></strong>  
  5. </div>  
Output

 
 
ngFor

The ngFor directives instantiates a template once per item from an iterable. The context of each instantiated template inherits from the outer context with the given loop variable. ngFor provides several exported values that can be used to local variables :-

  • index - will be set to the current loop iteration for each template context
  • first - will be set to a boolean value indicating whether the item is the first one in the iteration.
  • last - will be set to a boolean value indicating whether the item is the last one in the iteration.
  • even - will be set to a boolean value indicating whether this item has an even index.
  • odd - will be set to a boolean value indicating whether this item has an odd index

Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM. This has important implications for animations and any stateful controls (such as <input> elements which accept user input) that are present. Inserted rows can be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such as user input.

Sample Code for app.component.ngFor.ts

  1. import { Component, OnInit, Directive } from '@angular/core';  
  2.   
  3. @Component({  
  4.     moduleId: module.id,  
  5.     selector: 'product-list',  
  6.     templateUrl: 'app.component.ngFor.html'  
  7. })  
  8.       
  9. export class NgForComponent implements OnInit {  
  10.     productList: Array<string> = ['IPhone','Galaxy 7.0','Blackberry 10Z'];  
  11.   
  12.     constructor() { }  
  13.     ngOnInit() { }  
  14. }  
Sample Code for app.component.ngFor.html
  1. <div>  
  2.     <strong>Demonstrate ngFor</strong>  
  3.     <ul>  
  4.         <li *ngFor="let item of productList">  
  5.             {{item}}  
  6.         </li>  
  7.     </ul>  
  8. </div>  
Output

 
ngSwitch

The ngSwitch directives is actually compromise of two directives, an attribute directives and a structural directives. It is similar like switch statement in javascript or other languages. ngSwitch stamps our nested views when their match expression value matches the value of the switch expression. The expression bound to the directives defines what will compared against in the switch structural directives. If an expression bound to ngSwitchCase matches the one given to ngSwitch, those components are created and the others destroyed. If none of the cases match, then components that have ngSwitchDefault bound to them will be created and the others destroyed. Note that multiple components can be matched using ngSwitchCase and in those cases all matching components will be created. Since components are created or destroyed be aware of the costs in doing so.

Sample Code for app.component.ngSwitch.ts
  1. import { Component, OnInit, Directive } from '@angular/core';  
  2.   
  3. @Component({  
  4.     moduleId: module.id,  
  5.     selector: 'student-list',  
  6.     templateUrl: 'app.component.ngSwitch.html'  
  7. })  
  8.   
  9. export class NgSwitchComponent implements OnInit {  
  10.     studentList: Array<any> = new Array<any>();  
  11.   
  12.     constructor() { }  
  13.     ngOnInit() {  
  14.         this.studentList = [  
  15.             { SrlNo: 1, Name: 'Rajib Basak', Course: 'Bsc(Hons)', Grade: 'A' },  
  16.             { SrlNo: 2, Name: 'Rajib Basak1', Course: 'BA', Grade: 'B' },  
  17.             { SrlNo: 3, Name: 'Rajib Basak2', Course: 'BCom', Grade: 'A' },  
  18.             { SrlNo: 4, Name: 'Rajib Basak3', Course: 'Bsc-Hons', Grade: 'C' },  
  19.             { SrlNo: 5, Name: 'Rajib Basak4', Course: 'MBA', Grade: 'B' },  
  20.             { SrlNo: 6, Name: 'Rajib Basak5', Course: 'MSc', Grade: 'B' },  
  21.             { SrlNo: 7, Name: 'Rajib Basak6', Course: 'MBA', Grade: 'A' },  
  22.             { SrlNo: 8, Name: 'Rajib Basak7', Course: 'MSc.', Grade: 'C' },  
  23.             { SrlNo: 9, Name: 'Rajib Basak8', Course: 'MA', Grade: 'D' },  
  24.             { SrlNo: 10, Name: 'Rajib Basak9', Course: 'B.Tech', Grade: 'A' }  
  25.         ];  
  26.     }  
  27. }  
Sample Code for app.component.ngSwitch.html
  1. <div>  
  2.     <strong>Demonstrate ngSwitch</strong>  
  3.     <table style="width:100%;border:solid;border-color:blue;border-width:thin;">  
  4.         <thead>  
  5.             <tr >  
  6.                 <td>Srl No</td>  
  7.                 <td>Student Name</td>  
  8.                 <td>Course</td>  
  9.                 <td>Grade</td>  
  10.             </tr>  
  11.         </thead>  
  12.         <tbody>  
  13.             <tr *ngFor="let student of studentList;" [ngSwitch]="student.Grade">  
  14.                 <td>  
  15.                     <span *ngSwitchCase="'A'" [ngStyle]="{'font-size':'18px','color':'red'}">{{student.SrlNo}}</span>  
  16.                     <span *ngSwitchCase="'B'" [ngStyle]="{'font-size':'16px','color':'blue'}">{{student.SrlNo}}</span>  
  17.                     <span *ngSwitchCase="'C'" [ngStyle]="{'font-size':'14px','color':'green'}">{{student.SrlNo}}</span>  
  18.                     <span *ngSwitchDefault [ngStyle]="{'font-size':'12px','color':'black'}">{{student.SrlNo}}</span>  
  19.                 </td>  
  20.                 <td>  
  21.                     <span *ngSwitchCase="'A'" [ngStyle]="{'font-size':'18px','color':'red'}">{{student.Name}}</span>  
  22.                     <span *ngSwitchCase="'B'" [ngStyle]="{'font-size':'16px','color':'blue'}">{{student.Name}}</span>  
  23.                     <span *ngSwitchCase="'C'" [ngStyle]="{'font-size':'14px','color':'green'}">{{student.Name}}</span>  
  24.                     <span *ngSwitchDefault [ngStyle]="{'font-size':'12px','color':'black'}">{{student.Name}}</span>  
  25.                 </td>  
  26.                 <td>  
  27.                     <span *ngSwitchCase="'A'" [ngStyle]="{'font-size':'18px','color':'red'}">{{student.Course}}</span>  
  28.                     <span *ngSwitchCase="'B'" [ngStyle]="{'font-size':'16px','color':'blue'}">{{student.Course}}</span>  
  29.                     <span *ngSwitchCase="'C'" [ngStyle]="{'font-size':'14px','color':'green'}">{{student.Course}}</span>  
  30.                     <span *ngSwitchDefault [ngStyle]="{'font-size':'12px','color':'black'}">{{student.Course}}</span>  
  31.                 </td>  
  32.                 <td>  
  33.                     <span *ngSwitchCase="'A'" [ngStyle]="{'font-size':'18px','color':'red'}">{{student.Grade}}</span>  
  34.                     <span *ngSwitchCase="'B'" [ngStyle]="{'font-size':'16px','color':'blue'}">{{student.Grade}}</span>  
  35.                     <span *ngSwitchCase="'C'" [ngStyle]="{'font-size':'14px','color':'green'}">{{student.Grade}}</span>  
  36.                     <span *ngSwitchDefault [ngStyle]="{'font-size':'12px','color':'black'}">{{student.Grade}}</span>  
  37.                 </td>  
  38.             </tr>  
  39.         </tbody>  
  40.     </table>  
  41. </div>  
Output

 
 


Similar Articles