Hi friends, in the last session we have learnt about how to setup in the local environment. In this session we will learn about Directives. Topics that are going to be covered in this session are
- Structural directives (Built-in Directives (ngIF, ngFor, ngSwitch)
- Style and Class Directives ( ngClass, ngStyle)
- Attribute directives
- Host Listener and Host Binding
Overview of Directives:
Directives are the classes that can change the behaviour or appearance of the components by using CSS Classes, CSS Styles and events.
There are three kinds of directives in Angular:
- Components—directives with a template.
- Structural directives—change the DOM layout by adding and removing DOM elements.
- Attribute directives—change the appearance or behavior of an element.
Components are the most common of the three directives. You saw a component for the first time in the QuickStart example.
Structural Directives change the structure of the view. Two examples are NgFor and NgIf in the Template Syntax page.
- We use (*) before the structural directives, and when we use (*) before ngIf/ ngFor, angular actually recognizes that the current element as a template and it will read the current elements as <ng-template>. Where as in Angular 2.X it reads as <template>.
Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax page, for example, can change several element styles at the same time.
*ngIf: This directive is used for conditional check on the HTML targeting elements. This will work similar to ng-if in Angular 1.X, where the elements will not get rendered into DOM until the condition satisfies.
Step1: From the quick start example edit the component.ts
File: app.component.ts
|
1 2 3 4 5 6 7 8 9 |
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './template.html' }) export class AppComponent { hide = false; myname = "John Smith"; } |
Step2: Create a template.html in the app folder
File: template.html
|
1 2 3 4 |
<p *ngIf="!hide">{{myname}}</p> <!--By using comparision--> <p *ngIf="myname=='John Smith'">{{myname}}</p> |
Note: when use * before ngIf, angular treats it as <ng-template>
|
1 2 3 |
<ng-template [ngIf]="myname == 'John Smith'"> John Smith </ng-template> |
*ngIf else: Angular 4 *ngIf has if/else syntax that make sense when you are making ajax calls we can show loading within the page. Where as else block is not existed in Angular 2.
From the above example, add the following html in the template
File: template.html
|
1 2 3 4 5 |
<p *ngIf="hide ;else template1">{{myname}}</p> <ng-template #template1> Hello {{myname}} </ng-template> |
Angular compiler (JIT or AOT) transforms any <ng-template> elements and directives used with an asterisk (*) into views that are separate from the root component view.
Here when we use (*) before ngIF, angular actually recognizes that the current element as a template, and angular reads it as,
|
1 2 3 |
<ng-template [ngIf]="hide"> {{myname}} </ng-template> |
*ngIf then else: *ngIf directive can use two templates, one for If condition and the other for else condition. In the previous example we have seen using template for else condition, now for If condition we need to use then statement.
File: template.html
|
1 2 3 4 5 6 7 8 9 |
<p *ngIf="!hide;then template1;else template2">{{myname}}</p> <ng-template #template1> Hello {{myname}} </ng-template> <ng-template #template2> Default template </ng-template> |
go to Help 
