Scribd
Upload
19 views2 pages

Directives

The document discusses different Angular structural directives like ngIf, ngSwitch and ngFor. ngIf conditionally includes/excludes elements, ngSwitch displays elements based on a switch expression, ngFor loops through elements of an array.

Uploaded by

ASHISH MALI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views2 pages

Directives

The document discusses different Angular structural directives like ngIf, ngSwitch and ngFor. ngIf conditionally includes/excludes elements, ngSwitch displays elements based on a switch expression, ngFor loops through elements of an array.

Uploaded by

ASHISH MALI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

.

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 { }

You might also like