Related Articles

Related Articles

How to show/hide data when the particular condition is true in AngularJS ?
  • Last Updated : 18 Nov, 2020

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



filter_none

edit
close

play_arrow

link
brightness_4
code

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
    }
  ]
}

chevron_right


app.module.ts:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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 { }

chevron_right


app.component.html: 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<ol>
    <li *ngFor="let company of companies">
        <i *ngIf="company.isTechnical"> {{company.name}} </i>
    </li>    
</ol>

chevron_right


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. 




My Personal Notes arrow_drop_up
Recommended Articles
Page :