Angular 19 tutorial in Hindi #15 If Else in Angular | control flow statement | Hide-Show | Toggle

Define Property and Html for If else condition

Apply If else condition

Hide and show with button click

Toggle with button click

Update button text with toggle

Interview Question

A "property" in the context of an if-else condition refers to a characteristic or attribute of an object or data that is being evaluated. The value of this property determines which branch of the if-else statement will be executed.


<h1>If Else | Control Flow</h1>

<!-- @if(val>5){
<div style="background-color: gold; height: 200px; width: 200px;">

</div>
} -->

<button (click)="hide()">Hide </button>
<button (click)="show()">Show </button>
<button (click)="toggle()">Toggle </button>

<button (click)="toggle()">
{{display?'hide':'show' }}</button>


@if(display){
<div style="background-color: green; height: 200px; width: 200px;">

</div>
}

<hr>


<button (click)="toggleDivs()">Toggle Divs</button>
@if(displayOneDiv){
<div style="background-color: blue; width: 100px; height: 100px;">

</div>

}
@else{
<div style="background-color: red; width: 100px; height: 100px;">

</div>
}


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

@Component({
selector: 'app-root',
imports: [],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
display=true
val=10;
displayOneDiv=true

hide(){
this.display=false
}
show(){
this.display=true
}
toggle(){
this.display= !this.display
}
toggleDivs(){
this.displayOneDiv=!this.displayOneDiv
}
}