Overview

<docs-decorative-header title="Built-in directives" imgSrc="adev/src/assets/images/directives.svg"> <!-- markdownlint-disable-line --> Directives are classes that add additional behavior to elements in your Angular applications. </docs-decorative-header>

Use Angular's built-in directives to manage forms, lists, styles, and what users see.

The different types of Angular directives are as follows:

This guide covers built-in attribute directives.

Built-in attribute directives

Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components.

The most common attribute directives are as follows:

HELPFUL: Built-in directives use only public APIs. They do not have special access to any private APIs that other directives can't access.

Adding and removing classes with NgClass

Add or remove multiple CSS classes simultaneously with ngClass.

HELPFUL: To add or remove a single class, use class binding rather than NgClass.

Import NgClass in the component

To use NgClass, add it to the component's imports list.

import {NgClass} from '@angular/common';

@Component({
  /* ... */
  imports: [NgClass],
})
export class AppComponent {}

Using NgClass with an expression

On the element you'd like to style, add [ngClass] and set it equal to an expression. In this case, isSpecial is a boolean set to true in app.component.ts. Because isSpecial is true, ngClass applies the class of special to the <div>.

Using NgClass with a method

1. To use NgClass with a method, add the method to the component class. In the following example, setCurrentClasses() sets the property currentClasses with an object that adds or removes three classes based on the true or false state of three other component properties.

   Each key of the object is a CSS class name. If a key is true, ngClass adds the class. If a key is false, ngClass removes the class.

   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" region="setClasses"/>

2. In the template, add the ngClass property binding to currentClasses to set the element's classes:

   <docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="NgClass-1"/>

For this use case, Angular applies the classes on initialization and in case of changes caused by reassigning the currentClasses object. The full example calls setCurrentClasses() initially with ngOnInit() when the user clicks on the Refresh currentClasses button. These steps are not necessary to implement ngClass.

Setting inline styles with NgStyle

HELPFUL: To add or remove a single style, use style bindings rather than NgStyle.

Import NgStyle in the component

To use NgStyle, add it to the component's imports list.

import {NgStyle} from '@angular/common';

@Component({
  /* ... */
  imports: [NgStyle],
})
export class AppComponent {}

Use NgStyle to set multiple inline styles simultaneously, based on the state of the component.

1. To use NgStyle, add a method to the component class.

   In the following example, setCurrentStyles() sets the property currentStyles with an object that defines three styles, based on the state of three other component properties.

   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" region="setStyles"/>

2. To set the element's styles, add an ngStyle property binding to currentStyles.

   <docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="NgStyle-2"/>

For this use case, Angular applies the styles upon initialization and in case of changes. To do this, the full example calls setCurrentStyles() initially with ngOnInit() and when the dependent properties change through a button click. However, these steps are not necessary to implement ngStyle on its own.

Hosting a directive without a DOM element

The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

Use <ng-container> when there's no single element to host the directive.

Here's a conditional paragraph using <ng-container>.

1. Import the ngModel directive from FormsModule.

2. Add FormsModule to the imports section of the relevant Angular module.

3. To conditionally exclude an <option>, wrap the <option> in an <ng-container>.

   <docs-code header="app.component.html (select-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" region="select-ngcontainer"/>

What's next