Angular 2 Structural Directives [How To Write Structural Directives?]

What are directives?

Angular lets you extend HTML with new attributes called directives.

There are two other kinds of Angular directives,

1.      Components

2.      Attribute directives

Stayed Informed - Angular 4 vs. Angular 2

What are structural directives?

The “Structural directives” are responsible for HTML layout. They shape or reshape the DOM structure; it is using for adding, removing and manipulating the elements.

The “Structural directives” is used to enable an element as a template for creating additional elements. If you want to create structural directive that time you should have knowledge of <template> elements and structural directives are easy to recognize.

The two familiar examples of structural directive as,

1.      *ngIf

2.      *ngfor

An asterisk (*) precedes the directive attribute name as

1	<div *ngIf="user" >{{user.name}}</div>

How to creating a structural directive?

1 2 3 4 5 6 7 8 9 10 11 12

@Directive({ selector: '[appDelay]' }) export class DelayDirective { constructor( private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef ) { } @Input() set appDelay(time: number): void { } }

How to create multiple structural directives?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

import { Component } from '@angular/core'; @Component({ selector: 'app-root', styles: [` .tabs-sec { background-color: #cccff; display: flex; flex-direction: row; width: 100%; } `], template: ` <div class="tabs-sec"> <app-tab *ngFor="let tab of tabs; let i = index" [active]="isSelected(i)" (click)="setTab(i)"> {{ tab.title }} </app-tab> </div> <div [ngSwitch]="tabNumber"> <template ngFor [ngForOf]="tabs" let-tab let-i="index"> <app-tab-content *ngSwitchCase="i"> {{tab.content}} </app-tab-content> </template> <app-tab-content *ngSwitchDefault>clect to select your tab</app-tab-content> </div> ` }) export class AppComponent { tabNumber = -1; tabs = [ { title: 'Blogger1', content: 'Tab Blogger 1' }, { title: 'Blogger2', content: 'Tab Blogger 2' }, { title: 'Blogger3', content: 'Tab Blogger 3' }, ]; setTab(num: number) { this.tabNumber = num; } isSelected(num: number) { return this.tabNumber === i; } }

References,

https://egghead.io/lessons/angular-2-write-a-structural-directive-in-angular-2

I hope you are enjoying with this post! Please share with you friends. Thank you!!