Directives

Angular offers two kinds of built-in directives: attribute directives and structural directives.

Built-in attribute directives

Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components. You usually apply them to elements as if they were HTML attributes, hence the name.

Many NgModules such as the RouterModule and the FormsModule define their own attribute directives. The most common attribute directives are as follows:

• NgClass—adds and removes a set of CSS classes.

• NgStyle—adds and removes a set of HTML styles.

• NgModel—adds two-way data binding to an HTML form element.

Built-in structural directives

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, and manipulating the host elements to which they are attached.

This section is an introduction to the common built-in structural directives:

• NgIf—conditionally creates or destroys subviews from the template.

• NgFor—repeat a node for each item in a list.

• NgSwitch—a set of directives that switch among alternative views.