What is the equivalent of ngShow and ngHide in Angular 2+?

ngShow and ngHide are two ng directives in AngularJS used to show and hide the elements respectively. ngShow is used to show a div tab by linking it to a Boolean variable in the script. If the value of the variable is true then the item is displayed, else the item remains hidden and the vice versa happens in the case of ngHide.

Example for ng-show: This example demonstrates how ngShow works.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<script src=
</script>
  
<body ng-app="">
    <div ng-show="true">
        <h1 style="color:green;">GeeksForGeeks</h1>
    </div>
</body>
  
</html>

chevron_right


Output:

Similarly, if ng-show value set to false then it will disappear.



Example for ng-hide: This example demonstrates how nghide works.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<script src=
</script>
  
<body ng-app="">
    <div ng-hide="true">
        <h1 style="color:green;">
          GeeksForGeeks
      </h1>
    </div>
</body>
  
</html>

chevron_right


Output: Output here is a black screen because the ng-hide is set to true, that means the GeeksForGeeks is hidden. Similarly if true is changed to false then it appears as follows:

Implementation on Angular 2+
In angular, there are two ways to implement ng-hide and ng-show:

  1. By using [hidden] property:[hidden] property in angular, modifies the display property and does no change with the DOM. It only instructs the browser to not show the content

    Syntax:

    <div [hidden]="boolean_var"></div>

    As it don’t do any hindrance with the DOM thus, if display property is used in CSS then this will fail. For example for the upper example, the [hidden] will fail if done as follows.

    <div [hidden]="boolean_var" style="display:block; ></div>

    The RHS side of hidden property consists of the name of the boolean variable which is in the component class. The value of that variable decides whether [hidden] will hide or not.

    Example:

    • The Template file
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <div [hidden]="isHidden">
          This will be hidden..
      </div>

      chevron_right

      
      

    • The Component Class
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      import {
          Component,
          OnInit
      }
        
      from '@angular/core';
      @Component( {
          selector: 'app-list', templateUrl: 
            './list.component.html', styleUrls:
            ['./list.component.css']
      }
        
      ) export class ListComponent implements OnInit {
          isHidden: boolean=true;
          constructor() {}
          ngOnInit() {}
      }

      chevron_right

      
      

    • Output: This don’t show anything on the screen.
  2. By using *ngIf directive: It is a more effective way that [hidden]. It effectively removes the content from the DOM and thus there are loopholes in this method.

    Syntax:

    <div *ngIf="boolean_var"></div>

    Similar to [hidden] property the RHS side of this property consists of the name of the boolean variable which is in the component class. The value of that variable decides whether the content will be in the DOM or not.

    Example:

    • The Template file
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <div *ngIf="isShown">
          This will be Shown..
      </div>

      chevron_right

      
      

    • The Component Class:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      import { Component, OnInit } from '@angular/core';
        
      @Component({
        selector: 'app-list',
        templateUrl: './list.component.html',
        styleUrls: ['./list.component.css']
      })
      export class ListComponent implements OnInit {
        
      isShown:boolean=true;
        constructor() { }
          
        ngOnInit() {
        }
      }

      chevron_right

      
      

    • Output:
      This will be Shown..


My Personal Notes arrow_drop_up

Im a final year MCA student at Panjab University, Chandigarh, one of the most prestigious university of India I am skilled in various aspects related to Web Development and AI I have worked as a freelancer at upwork and thus have knowledge on various aspects related to NLP, image processing and web

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.