AngularJS Directives
Types of Angular Directives
There are 3 types of directives in AngularJS.
1. Structural : Changes the structure or layout of DOM
ex: ngIf, ngFor, ngSwitch
2. Attribute : Change the appearance/behaviors of the DOM by modifying DOM element's attribute value.
ex: ngClass,ngStyle
3. Component : with its own template
Class binding:
Class binding is used to bind the data from component to HTML class property. The syntax is as follows −
1. Structural Directives
Changes the structure or layout of DOM by adding or removing the DOM element in template or HTML document.
It is prefixed with * sign.
ex: ngIf, ngFor, ngSwitch.
Angular provides many built-in directives, and you will learn them in later topics.
NgIf directive:
NgIf directive is used to show or hide data in your application based on the given condition, It can be applied this to any tag in a template.
Let us try ngIf directive in our test-app component.
Add the below tag in test.component.html.
<p>test works!</p> <div *ngIf="4 < 5">Show data1</div> <div *ngIf="true">Show data2</div>
<div *ngIf="false">Show data3</div>
Add the test component in your app.component.html file as shown below −
<app-test></app-test>
Start server (if not started already) using the below command −
C:>myapp> ng serve
Result:
test works!
Show data1
Show data2
Add the below tag in test.component.ts.
export class TestComponent implements OnInit { qualified : boolean = true;
Add the below tag in test.component.html.
<p>ngIfElse example!</p> <div *ngIf="qualified"> Hello you are qualified </div> <div *ngIf ="!qualified"> Try Again.. </div>
Result:
Hello you are qualifiedChange the qualified property value false and run the app
Result is:
Try againExample-2
using ng-template
How to make use of ng-if , else in angularJS
<div *ngIf="qualified;else template_name"> You are Qualified </div> <ng-template #template_name>Not Qualified...</ng-template>
ngFor directive
ngFor is used to repeat a part of elements from the list of values.
Let’s check how ngFor works with the below example.
Add the nums in test.component.ts file as shown below
export class TestComponent implements OnInit { nums = [10,20,30,40,50];
Add the nums in test.component.html file as shown below
<h2>ngFor directive</h2> <ul> <li *ngFor="let i of nums"> {{i}} </li> </ul>
The let i creates a template local variable to get the array elements.
Result:
ngSwitch directive
NgSwitch is used to check multiple choices.
Let us try ngSwitch directive with the below example.
Add the prperty color in test.component.ts file.
export class TestComponent implements OnInit { color= 'red'; }
Add the below code in test.component.html file.
<h2>ngFor directive</h2> <ul> <li *ngFor="let i of nums"> {{i}} </li> </ul> <h2>ngSwitch directive</h2>
<ul [ngSwitch]= "color" >
<li *ngSwitchCase="'red'"> <p>Your choice is Red..</p> </li>
<li *ngSwitchCase="'green'"> <p>Your choice is Green..</p> </li> <li *ngSwitchCase="'blue'"> <p>Your choice is Blue</p> </li> <li *ngSwitchDefault> <p>Please choose Color</p> </li> </ul>
Result:
2. Attribute Directives:
ngStyle directive:
ngStyle directive is used to add dynamic styles. Below example is used to apply blue color to the paragraph.
<p [ngStyle]="{'color': 'blue', 'font-size': '14px'}">
paragraph style is applied using ngStyle
</p> ngClass
ngClass is used to add or remove CSS classes in HTML template.
Now, Let us try ngClass directive in our test-app application.
Create a class Product using the below command
C:\myapp> ng g class product/Product
creates the following files in appproduct folder.
CREATE src/app/product/product.spec.ts (158 bytes)
CREATE src/app/product/product.ts (25 bytes)
Open src/app/product.ts file and add the below code −
export class Product { productId : number = 0; productName : string = ""; }
Open src/app/test.component.ts file and add the below code , and
import product
import { Component, OnInit } from '@angular/core'; import { Product } from '../product/product'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { products: Product[] = [ { "productId": 1, "productName": 'Product1' }, { "productId": 2, "productName": 'Product2' }, ]; }
Here, we have declared a products array as a local variable and initialized with 2 product objects.
Open test.component.css file and add below code
.highlight { color: red; font-weight: bold; }
Open test.component.html file and add the below code −
<div class="container"> <br/> <div *ngFor="let product of product s" [ngClass]="{ 'highlight':product.productName === 'Product1' }"> {{ product.productName }} </div> </div>
Add the following tags in app.component.html file and add the below code −
<app-test></app-test>
In the above example,
We have applied, ngClass for Product1, Now it will highlight the Product1.
Finally, start your application using the below command −
C:\myapp> ng serve
Result:
3. Component Directives:
Component provides
@Input and @Output
to send and receive information between parent and child components.
Now Create one new ChildComponent using below command −
ng generate component child
First, import Input
Open child.component.ts
import { Component, Input, OnInit } from '@angular/core';
and add a property−
@Input() userName = ""; //The value for userName comes from the parent component.
Here, we are setting a input property for ChildComponent.
Inside child.component.html and add below code − <p>child works!</p> <p>Hi {{ userName }}</p> In this, the value userName is to welcome the user. In app.component.ts and add below code − name: string = 'Peter';
In app.component.html and add below code − <h1>App component</h1> <app-child [userName]="name"><app-child>
Comments
Post a Comment