📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
Check out Angular 7|8 ngFor Example tutorial
Video
This tutorial has explained in below video tutorial on YouTube. Subscribe to our youtube channel for future video updates.NgIf Directive
Create an Angular Component - NgifComponent
C:\Angular\angular8-helloworld-example-tutorial\src\app> ng g c ngif
CREATE src/app/ngif/ngif.component.html (19 bytes)
CREATE src/app/ngif/ngif.component.spec.ts (614 bytes)
CREATE src/app/ngif/ngif.component.ts (261 bytes)
CREATE src/app/ngif/ngif.component.css (0 bytes)
UPDATE src/app/app.module.ts (798 bytes)
ngif.component.ts - NgifComponent
import { Component } from '@angular/core';
@Component({
selector: 'app-ngif',
templateUrl: './ngif.component.html',
styleUrls: ['./ngif.component.css']
})
export class NgifComponent {
show: boolean = true
user = {
id : 1,
name: "Ramesh"
};
a = true;
b = false;
showActions = true;
users = [{
id: 100,
firstName: "Ramesh",
lastName: "Fadatare",
emailId: "ramesh@gmail.com"
},
{
id: 101,
firstName: "Tony",
lastName: "Stark",
emailId: "tony@gmail.com"
}, {
id: 100,
firstName: "Tom",
lastName: "Cruise",
emailId: "tom@gmail.com"
}];
}
ngif.component.html - ngIf Directive Examples
<div class="container">
<h1>ngif Examples</h1>
<!-- ngIf - Show this all the time -->
<b>ngIf - Show this all the time</b>
<p> *ngIf="show">Show this only if "show" is true</p>
<!-- ngIf - Avoiding "Cannot read property of undefined" errors -->
<b>ngIf - Avoiding "Cannot read property of undefined" errors</b>
<p *ngIf="user">
{{user.name}}
</p>
<!-- ngIf - Logical NOT (!) example -->
<b>ngIf - Logical NOT (!) example</b>
<p *ngIf="!show">
Show this only if "show" is NOT true
</p><br>
<!-- ngIf - Logical AND (&&) example -->
<b>ngIf - Logical AND (&&) example</b>
<p *ngIf="a && b">
Show this only if a AND b are true
</p><br>
<!-- ngIf - Logical OR (||) example -->
<b>ngIf - Logical OR (||) example</b>
<p *ngIf="a || b">
Show this only if a OR b is true
</p><br>
<!-- ngIf - Working with "else" Examples -->
<b> ngIf - Working with "else" Examples</b>
<div *ngIf="show; else notShow">
<p>
Show this only if "show" is true
</p>
</div>
<ng-template #notShow>
<p>
Show this only if "show" is not true
</p>
</ng-template>
<!-- NgIf with "then" example -->
<b>NgIf with "then" example</b>
<ng-template *ngIf="show;then showBlock; else notShowBlock">
</ng-template>
<ng-template #showBlock>
<p>
Show this only if "show" is true
</p>
</ng-template>
<ng-template #notShowBlock>
<p>
Show this only if "show" is not true
</p>
</ng-template>
<!-- ngIf and ngFor with Table example -->
<b>ngIf and ngFor with Table example</b>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th *ngIf="showActions">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.emailId}}</td>
<td *ngIf="showActions">
<button>Delete</button>
<button>Update</button>
</td>
</tr>
</tbody>
</table>
</div>
Working with "else"
<!-- ngIf - Working with "else" Examples --> <b> ngIf - Working with "else" Examples</b> <div *ngIf="show; else notShow"> <p> Show this only if "show" is true </p> </div> <ng-template #notShow> <p> Show this only if "show" is not true </p> </ng-template>
Working with ngIf "then"
<!-- NgIf with "then" example --> <b>NgIf with "then" example</b> <ng-template *ngIf="show;then showBlock; else notShowBlock"> </ng-template> <ng-template #showBlock> <p> Show this only if "show" is true </p> </ng-template> <ng-template #notShowBlock> <p> Show this only if "show" is not true </p> </ng-template>
app-routing.module.ts - Add Entry Routing
{path: 'ng-if', component: NgifComponent}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { NgforComponent } from './ngfor/ngfor.component';
import { NgifComponent } from './ngif/ngif.component';
const routes: Routes = [
{path: '', component: HelloWorldComponent},
{path: 'hello-world', component: HelloWorldComponent},
{path: 'ng-for', component: NgforComponent},
{path: 'ng-if', component: NgifComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Output
Check out complete Angular 8 tutorial with examples - Angular 8 Tutorial with Examples.
Thank you for the posts. They are really nice examples. They really helped me find a solution.
ReplyDelete