Attribute directives are surrounded by brackets which
signals to Angular that the appearance or behavior of the DOM elements within the directive
may change depending on certain conditions. The most common attribute directive in Angular 2 is the
In Angular 1.x there was the
ng-hide directives, which would
show or hide elements depending on what the given expression evaluates to by
display CSS property.
hidden provides similar functionality in Angular 2, but there is no 'show' attribute this time — if you want to show an element, simply set
hidden to false!
<div [hidden]="name === 'Angular1'"> This will only show if name doesn't equal Angular1 </div>
The hidden attribute will evaluate the expression
name === 'Angular1', and if it evaluates true it will hide the element. Otherwise, it will continue to display the element.
You can view a live example of the hidden directive in the