Skip to main content
Dont use hidden attribute with AngularJS 2

Don’t use hidden attribute with AngularJS 2

As explained earlier in this post, AngularJS 2 directly uses the valid HTML DOM element properties and events unlike AngularJS 1.x pre-defined directives. So in place of ng-href, ng-src, ng-show and ng-hide, AngularJS 2 uses href, src and hidden properties to get the same result. But don’t use hidden attribute with AngularJS 2 to show/hide elements. Let me tell you WHY?

Don’t use hidden attribute with AngularJS 2. Here is WHY?

Before, we jump to AngularJS 2, first let’s find out how Angular 1.x uses ng-show or ng-hide. The ng-show and ng-hide directive shows or hides the given HTML element based on the expression provided to the attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

Let’s see via some code. Following code uses ng-show directive with an expression. And the result would be that <p> tag is not visible as condition is false.

<div ng-app="" ng-init="val=13">
Result : <p ng-show="val > 15">I am visible.</p>
</div>

Here is screenshot of following code in Chrome developer toolbar.

AngularJs ng-show uses ng-hide css

Now let’s see how AnuglarJS 2 does the same job. But first, what exactly hidden attribute is? It’s a new attribute in HTML5. As per Mozilla Developer network,

The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can’t be used until the login process has been completed. Browsers won’t render elements with the hidden attribute set.

In short, it is used to hide elements. Browsers are not suppose to display elements that have the hidden attribute specified. Browsers attach "display: none" styles to elements with hidden attribute. Let’s see some AngularJS 2 code. So here is AngularJS 2 component class with only one property hideElement.

import { Component } from 'angular2/core';

@Component({
  selector: 'demo',
  templateUrl: 'app/democomponent.html'
})
export class MainComponent {
  hideElement: true;
}

And here is HTML.

<p [hidden]="hideElement">
   I am using hidden attribute.
</p>

When you run this application for the first time, you will not see any text on the screen. Thanks to AngularJS 2 and hidden attribute. As browser adds display:none to p tag. See below Chrome Developer toolbar screenshot.

Don’t use hidden attribute with AngularJS 2

Works great. But what if somebody adds "display:flex" to <p> tag. And since it will be applicable for all your <p> tag and going to override hidden attribute CSS. So all the <p> tags even with hidden attribute, will become visible. And that’s why don’t use hidden attribute with AngularJS 2.

So how do you fix it?

There are couple of ways to fix this.

Solution 1

Define a css style for hidden attribute with display:none !important at the end of css stylesheet.

[hidden] {
  display: none !important;
}

So this will override all the other CSS styles and ensures that hidden attribute always uses display:none;

Solution 2

Second solution is, let’s not use hidden attribute. You can achieve your purpose with following code.

<p [style.display]="hideElement?'none':'inherit'">
   I am using hidden.
</p>

So this when rendered should have style="display:none;", if hideElement is true.

Solution 3

And the third solution is to use *ngIf to toggle the element.

<p *ngIf="hideElement">
  I am using ngIf.
</p>

But there is a catch. *ngIf doesn’t show/hide element based on display property like hidden. It works by adding and removing elements from the DOM. So in this case, p tag is not part of DOM (if hideElement= true). I used this solution for Cascading DropDown List using AngularJS 2 post.

So which solution is good, I leave that up to you as you can use any of them based on your requirement.

Thank you for reading and I hope it helped you. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in comments section.

4 thoughts on “Don’t use hidden attribute with AngularJS 2

Leave a Reply

Your email address will not be published. Required fields are marked *

5 − 1 =