python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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.

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, Im 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!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions