RPeraltaJr
5/3/2017 - 5:14 AM

Structural Directives

Structural Directives

import { Component } from '@angular/core';

@Component({
  selector: 'my-tutorials',
  template: `<h2>{{title}}</h2>
             <p *ngIf="showElement">Show Element</p>
             <div [ngSwitch]="color">
               <p *ngSwitchWhen="'red'">Red paragraph is shown</p>
               <p *ngSwitchWhen="'blue'">Blue paragraph is shown</p>
               <p *ngSwitchDefault>Invalid paragraph is shown</p>
             </div>
             <ul>
              <li *ngFor="let color of colors">{{color}}</li>
             </ul>`,
})

export class TutorialsComponent{
  public title = "Tutorials from Joatmon Channel";
  public showElement = true;
  public color = "red";
  public colors = ['red','blue','green'];
}