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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.