How to show/hide data when the particular condition is true in AngularJS ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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. Comment More infoAdvertise with us Next Article How to fetch the details using ng-repeat in AngularJS ? B bunnyram19 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to fetch the details using ng-repeat in AngularJS ? In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angul 2 min read How to Sort List by Date Filter in AngularJS ? AngularJS is a feature-based JavaScript framework that uses various tools to create dynamic single-page web applications. While developing the application we have the requirement to play with the data in AngularJS and sort this list of data by a date properly in descending order. This can be done us 5 min read How to use filter within controllers in AngularJS ? In this article, we will see how to use the Filter inside the controller using AngularJS. Filters are used to format the value of an expression and display it to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS facilitates many built-in filters, although, 4 min read How to conditionally apply CSS styles in AngularJS ? In AngularJS we can build the dynamic single-page application with interactive CSS embedded in it. But as usual, while developing the application, the CSS is once statically defined and used, we are not changing the CSS when the application is running. But, in AngularJS we can dynamically change the 5 min read How to use the $index inside a ng-repeat to enable a class and show a DIV in AngularJS ? In AngularJS applications, we can use the $index variable within an ng-repeat directive to enable a class and show a DIV element based on the index of the current item in the iteration. The $index variable represents the current index of the item being processed in the ng-repeat loop. Similarly, to 6 min read Disabling the Button when input field is empty in Angular A Disabled button is un-clickable and unusable. This is useful when suppose user has not entered a password then the submit button should be disabled. In this article, we will see the Disable button when input is empty in Angular. Steps for Installing & Configuring the Angular Application Step 3 min read Like