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!

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book