Angular 2 Hidden Attribute with Multiple Examples

Angular 2 [hidden] is a special case binding to hidden property.

It is closest cousin of ng-show and ng-hide.

It is more powerful to bind any property of elements. Both the ng-show and ng-hide are used to manage the visibility of elements using ng-hide css class. It is also set the display property “display:none”.

Stayed Informed - Angular 2 @Inputs

All the above features are supported in Angular 2 but added some extra feature like animations etc.

Syntax:-

<div [hidden]="!active">
    Hello, this is active area!
</div>

Note: - Don't use hidden attribute with Angular 2 to show/hide elements.

Question: - Don't use hidden attribute with Angular 2. Here is why?

The hidden attribute 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.

Example,

import { Component } from 'angular2/core';

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

<div [hidden]="Ishide">
     Hey, I’m using hidden attribute.
</div>

Works great but some time its override hidden attribute with some css and that time behave wrong!..

For example,

Be sure to don't have a display css rule on your <p> tags who override hidden behaviour like i.e.

p {  
    display: inline-block !important;
}

The above hidden html attributes acts like display: none;

Stayed Informed - Angular 4 vs. Angular 2

I hope you are enjoying with this post! Please share with you friends. Thank you so much!