Angular 2 Structural Directives

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,

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.