How to show/hide data when the particular condition is true in AngularJS ?
In AngularJS, in order to hide or show data or content, we can use *ngIf structural directive. By using this, we can evaluate conditions and then *ngIf based on the condition displays the content. For example, if the condition for *ngIf is true then the content will be displayed and if the condition is false then the content is not displayed.
Approach:
- In order to give a lucid and elaborate view, I’ll explain the concept using an example.
- Consider we have an array of objects in .ts file and the objects in the array contain a list of technical and non-technical companies.
- The objective of this experiment is to display the data for all the technical companies and to hide all the non-technical companies.
- In order to traverse through the array, we will use the *ngFor directive in .html file.
- Once you are done with the implementation start the server.
Implementation:
app.component.ts:
Javascript
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ]})export class AppComponent { companies = [ { name: "Microsoft", isTechnical : true, }, { name: "GeeksForGeeks", isTechnical : true }, { name: "Netflix", isTechnical : false }, { name: "TCS", isTechnical : true } ]} |
app.module.ts:
Javascript
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ]})export class AppModule { } |
app.component.html:
HTML
<ol> <li *ngFor="let company of companies"> <i *ngIf="company.isTechnical"> {{company.name}} </i> </li> </ol> |
Output: You can clearly see the 3rd item is hidden because its condition is false. In order to give a more-visible example, I left it blank.
