Angular 2 Directives

Attribute Directives


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 hidden directive.

In Angular 1.x there was the ng-show and ng-hide directives, which would show or hide elements depending on what the given expression evaluates to by setting the 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!

For example:

<div [hidden]="name === 'Angular1'">
    This will only show if name doesn't equal Angular1

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 app/app.component.html file:

Additional Reading

Attribute Directives


I finished! On to the next chapter