.

html

<h1>Structure Directives </h1>

***********************************************************************************
************
<h2> ngIf </h2>
<b *ngIf = 'status'>
Welcome to Angular World
</b>
<br>
<b *ngIf ="check; else elseblock">
Since property check is set to true
</b>
<ng-template #elseblock>
<b>In else block</b>
</ng-template>
<br>
<br>
***********************************************************************************
************
<br>
<h2> ngSwitch </h2>
<div [ngSwitch]= "color">
<div *ngSwitchCase = "'red'">You picked Red color </div>
<div *ngSwitchCase = "'green'">You picked Green color </div>
<div *ngSwitchCase = "'blue'">You picked Blue color </div>
<div *ngSwitchDefault>Pick Again</div>
</div>
***********************************************************************************
***********
<br>
<h2> ngFor </h2>
<b>Colors in an array are: </b>
<div *ngFor = "let color of colors; index as i">
<b>{{i}} {{color}} </b>
</div>
***********************************************************************************
***********
___________________________________________________________________________________
____________________________________________

component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public check=false;
public status=true;
public color='orange';
public colors=['red','green','blue','orange'];
title = 'template-reference-variables';
}
___________________________________________________________________________________
__________________________

module.ts

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }