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 the *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 the .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 the .html file.
- Once you are done with the implementation start the server.
Example: This example describes the rendering of data based on the specific condition in AngularJS.
app.component.ts
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
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
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >
Display or Hide data when the
particular condition is true in
AngularJS
</ h3 >
< 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.
Last Updated :
08 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...