Attribute directives manipulate the DOM by changing the appearance or the behavior of specific DOM elements. These types of directives are surrounded by brackets, and are attributes of an HTML element. The brackets are symbols (one of the five types of symbols we listed at the beginning of this chapter), and they signal to Angular that it may need to change either the appearance or the behavior of the element for which the directive is an attribute of.

That last sentence was a mouthful, so let's take a look at a code example of the attribute directive you're most likely to use. The directive I'm referring to is named hidden, and will cause Angular to either show or hide its element:

<div [hidden]="usertype != 'admin'">
  This element, and its contents, will be hidden for all users that are not Admins. 
</div>

In the previous code, we've hidden the div element and any embedded HTML from all user types that are not admins. Here, usertype and admin are, of course, application-contextual things, and are only used as an example to illustrate what Angular can do.

More generally, the hidden attribute directive is associated with an expression to be evaluated. The expression must evaluate to a Boolean (that is, true or false). If the expression evaluates to true, Angular will hide the element from the view. Conversely, if the expression evaluates to false, Angular will leave it alone and it will be displayed in the view. 

As I did in previous chapters, I will make sure to point you to the official documentation online. As you know by now, I'm not a fan of the approach that a lot of other IT books take, which is to regurgitate documentation. While it's unavoidable to some extent, some books fill most of their pages with it. So, I will continue to stay away from that trap and will continue to add all the value I can in better ways.

That being said, the official online documentation for attribute directives can be found at https://angular.io/guide/attribute-directives.