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.
<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.