Often it is required to show an element on click of a button or a link and hiding it again on click.
In simpler words, toggle element display on each click.
Practical example of this scenario is notification button on Facebook.
When it is clicked, notification list appears and when it is clicked again, the list disappears.
This post will explain a couple of methods in which this can be done in angular.

1. hidden property

Add HTML native hidden property to the element that needs to be toggled. When the value of hidden property is true, the element is not displayed.
Similarly, when it is false, the element is shown.
Bind the hidden property to a component property of boolean type so that it can only have a true or false value.
Example,
Below is the HTML template of an angular component containing a div and a button.
When this button is clicked, the div toggles its display.

<html>
   <title>Element toggle in angular</title>
   <body>
      <div [hidden] = “isShow”>This is a div which toggles.</div>
      <button (click) = toggleDisplay()>Toggle</button>
   </body>
</html>

Below is the corresponding component class which contains the property isShow which controls the display of div and a function toggleDisplay which handles the click event of button.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  isShow = false;

  toggleDisplay() {
    this.isShow = !this.isShow;
  }
}

This function reverses the value of property isShow when the button is clicked. Initially, the property isShow is set to false which means that the div is visible.
When the button is clicked, it sets the property isShow to false and the div is not displayed.

2. ngIf directive

ngIf directive is applied to an element and is bound to a component property or a condition. If the condition evaluates to true, the element is displayed else not.
Above example can be modified to use ngIf as shown below.

<html>
   <title>Element toggle in angular</title>
   <body>
      <div *ngIf = “!isShow”>This is a div which toggles.</div>
      <button (click) = toggleDisplay()>Toggle</button>
</body>
</html>

Component class for this approach is the same as for the earlier method since there is no change in the logic behind.

Note that the condition for ngIf is !isShow so that the div is displayed at page load.
This is because we have initialized isShow to false in the component class.

Difference between ngIf and hidden property

hidden property makes the element invisible while it is present on the page. It adds the same effect as by applying CSS property display: none;.
If ngIf directive is applied to an element and its condition evaluates to false, the element is removed from the page, you will not see it in source.

hidden is not recommended

Using native hidden property to hide or show elements is not recommended in angular. This is because behind the scenes it adds the same effect as CSS property display: none;.

However it does not add !important after it. 
Browsers also do not add !important when hidden is used by default.

This means that if any other style is already applied to the element, hidden will not work.
Hence if you have a choice between hidden and ngIf, go with ngIf.

Hope the article was useful.

Leave a Reply