How to use built in directives in Angular2
Posted By : Priya verma | 30-Dec-2016
Angular2 has a set of built-in directives which offers functionality to your applications.
import { CommonModule } from '@angular/common';
CommonModule contributes many of the common directives that applications need including ngIf and ngFor.
a) ngif: If the expression is evaluated to a true the NgIf shows the elements else it removes this element from DOM.
Syntax of *ngIf:
<section *ngIf="showSection">
Note: Don't forget the asterisk (*) in front of ngIf.
b) ngFor: ngFor allows us to build data presentation lists and tables in our HTML templates.
Syntax of ngFor
<li *ngFor="let item of list">
c) NgSwitch: Sometimes you need to render different elements depending on a given condition.
When you run into this situation, you could use ngIf several times like this:
Syntax of ngSwitch:
<div [ngSwitch]="condition">
<template *ngSwitchCase="case1">.....</span>
<template *ngSwitchCase="case2">.....</span>
<template *ngSwitchCase="case3">.....</span>
<template *ngSwitchDefault>...</template>
</div>
d) ngClass: ngClass directive dynamically binds one or more CSS classes to an HTML element. ngClass directive can be a string, an object, or an array. Best choice when we want to add or remove many CSS classes at the same time.
Syntax of ngClass:
<div [ngClass]="expression">
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Priya verma
Priya is a bright UI designer, having skills in , HTML, CSS, javascript, bootstrap. Her hobbies are playing outdoor games.