ANGULAR ngIf directive
ANGULAR
The Angular ngIf directive is a structural directive used to conditionally add or remove elements from the DOM.
Angular ngIf directive
➔ The Angular ngIf directive is a structured directive used to conditionally and dynamically add or remove elements from the DOM based on some boolean expression value.
➔ This example shows how ngIf structural directive works in Angular.
Create a project by ng new angular-ngif command.
ng new angular-ngif
app.module.ts file
Copy this file content to the target file.
Example
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Copy the code and try it out practically in your learning environment.
app.component.ts file
Copy this file content to the target file.
Example
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-ngif';
public con1: boolean = true;
public con2: boolean = true;
}
Copy the code and try it out practically in your learning environment.
HTML app.component.html file
Copy this file content to the target file.
Example
<div class="container p-2">
<h3>Only If Block</h3>
<input type="checkbox" [checked]="con1" [(ngModel)]="con1" />Condition1 is now {{ con1 }}
<div *ngIf="con1">Only If Block</div>
<div *ngIf="con1">Only If Block render when condition is true.</div>
<ng-template [ngIf]="con1">
<div>Only If Block render when condition is true.</div>
</ng-template>
<hr>
<h3>If Esle Block</h3>
<input type="checkbox" [checked]="con2" [(ngModel)]="con2" />Condition2 is now {{ con2 }}
<div *ngIf="con2 else p">If Block</div>
<ng-template #p><br>Else Block </ng-template>
<div *ngIf="con2; then thenBlock; else elseBlock"></div>
<ng-template #thenBlock>If Block render when condition is true.</ng-template>
<ng-template #elseBlock><br>Else Block render when condition is false.</ng-template>
</div>
Copy the code and try it out practically in your learning environment.
HTML index.html file
Copy this file content to the target file.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularNgif</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Copy the code and try it out practically in your learning environment.
Output
Run project by ng serve in command line (from inside project directory).
program output