Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.




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


Output:

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

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




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


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




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

      
      

    • The Component Class




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

      
      

    • 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




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

      
      

    • The Component Class:




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

      
      

    • Output:
      This will be Shown..


Last Updated : 08 Nov, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads