angular 2 [hidden]

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.

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

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.

import { Component } from 'angular2/core';

  selector: 'demo',
  templateUrl: 'app/component.html'
export class MainComponent {
  Ishide: true;

<div [hidden]="Ishide">
     Hey, Im using hidden attribute.

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!

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog -
My Books - Book 1 and Book 2

Angular 2 Hidden Attribute with Multiple Examples Angular 2 Hidden Attribute with Multiple Examples Reviewed by Anil Singh on 11:30 PM Rating: (5) Powered by Blogger.