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.