Skip to main content
Dont use hidden attribute with AngularJS 2

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.

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

Don’t use hidden attribute with Angular 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 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 Buy Me A Coffee

18 thoughts to “Don’t use hidden attribute with Angular 2”

  1. That ‘s not right, In angular V5+, it uses reboot.css in which there is already that code
    [hidden] {
    display: none !important;
    }

  2. Even if angular already does a feature, I somehow realize that I still need to use hidden input field and give it a custom event to do some logic. I dont know what others opinion. But for me, it still has purpose.

  3. I’m having an issue with hidden element, it’s very weired
    I have hidden attribute bended with ngrx store
    a button when I click it, it get hidden and update the value in the store to 1
    and when I come back to the same page that has this button again and loaded the store which has the value of 1
    so the hidden attribute would be like this [hidden]=”val > 0″ the expected result should hide the button
    yet I see this button not responding to this expression and so many more expressions I have tried in so many way
    it’s like, once its rendered its rendered or you must change the button manually by click otherwise it doesn’t respond to the value from store.
    I did so many change in store to solve this issue, but it’s still exist I don’t know if there is something I am missing in rendering strategy that the browser is making. I don’t think so !
    any suggestion !?

  4. You made my day after a lot of frustration seeing one element hidden while another one in the same page never disappeared.

  5. BTW in above you mentioned that display property hidden which is not a case. In CSS hidden is the property of visibility and display:none is known for adding and removing element from the DOM. Here is the basic difference between ngIf and hidden:
    ngIf is a structural directive, it creates/destroys content inside the DOM. The second statement just hides/shows the content with css, i.e. adding/removing display:none to the element’s style.

    You can read here for further detail:
    https://stackoverflow.com/questions/43034758/what-is-the-difference-between-ngif-and-hidden

  6. There is another way that is used with a global style, similar to the [hidden] attribute, but maybe a bit more conventional:

    .hidden {
    display: none !important;
    }

Leave a Reply

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