Don’t use hidden attribute with Angular 2

As explained earlier in this post, Angular 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, Angular 2 uses href, src and hidden properties to get the same result. But don’t use hidden attribute with Angular 2 to show/hide elements. Let me tell you WHY?

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

​

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

Before, we jump to Angular 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.

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 supposed to display elements that have the hidden attribute specified. Browsers attach "display: none" styles to elements with hidden attribute. Let’s see some Angular 2 code. So here is Angular 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 Angular 2 and hidden attribute. As browser adds display:none to p tag. See below Chrome Developer toolbar screenshot.

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

So how do you fix it?

There are a 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 Angular 2 post.

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

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

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 the comments section.

PS: If you found this content valuable and want to return the favour, then