Built-in Attribute Directives

Go back to Tutorial

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

Many details are covered in the Attribute Directives guide. Many NgModules such as the RouterModule and the FormsModule define their own attribute directives. This section is an introduction to the most commonly used attribute directives:

NgClass – add and remove a set of CSS classes
NgStyle – add and remove a set of HTML styles
NgModel – two-way data binding to an HTML form element

NgClass

You typically control how elements appear by adding and removing CSS classes dynamically. You can bind to the ngClass to add or remove several classes simultaneously.

A class binding is a good way to add or remove a single class.

src/app/app.component.html

<!– toggle the “special” class on/off with a property –>

<div [class.special]=”isSpecial”>The class binding is special</div>

To add or remove many CSS classes at the same time, the NgClass directive may be the better choice.

Try binding ngClass to a key:value control object. Each key of the object is a CSS class name; its value is true if the class should be added, false if it should be removed.

Consider a setCurrentClasses component method that sets a component property, currentClasses with an object that adds or removes three classes based on the true/false state of three other component properties:

src/app/app.component.ts

currentClasses: {};

setCurrentClasses() {

// CSS classes: added/removed per current state of component properties

this.currentClasses = {

‘saveable’: this.canSave,

‘modified’: !this.isUnchanged,

‘special’: this.isSpecial

};

}

Adding an ngClass property binding to currentClasses sets the element’s classes accordingly:

src/app/app.component.html

<div [ngClass]=”currentClasses”>This div is initially saveable, unchanged, and special</div>

It’s up to you to call setCurrentClassess(), both initially and when the dependent properties change.

NgStyle

You can set inline styles dynamically, based on the state of the component. With NgStyle you can set many inline styles simultaneously. A style binding is an easy way to set a single style value.

src/app/app.component.html

This div is x-large or smaller.

</div>

To set many inline styles at the same time, the NgStyle directive may be the better choice. Try binding ngStyle to a key:value control object. Each key of the object is a style name; its value is whatever is appropriate for that style.

Consider a setCurrentStyles component method that sets a component property, currentStyles with an object that defines three styles, based on the state of three other component propertes:

src/app/app.component.ts

currentStyles: {};

setCurrentStyles() {

// CSS styles: set per current state of component properties

this.currentStyles = {

‘font-style’: this.canSave ? ‘italic’ : ‘normal’,

‘font-weight’: !this.isUnchanged ? ‘bold’ : ‘normal’,

‘font-size’: this.isSpecial ? ’24px’ : ’12px’

};

}

Adding an ngStyle property binding to currentStyles sets the element’s styles accordingly:

src/app/app.component.html

This div is initially italic, normal weight, and extra large (24px).

</div>

It’s up to you to call setCurrentStyles(), both initially and when the dependent properties change.

NgModel – Two-way binding to form elements with [(ngModel)]

When developing data entry forms, you often both display a data property and update that property when the user makes changes.

Two-way data binding with the NgModel directive makes that easy. Here’s an example:

src/app/app.component.html (NgModel-1)

FormsModule is required to use ngModel

Before using the ngModel directive in a two-way data binding, you must import the FormsModule and add it to the NgModule’s imports list. Here’s how to import the FormsModule to make [(ngModel)] available.

src/app/app.module.ts (FormsModule import)

import { NgModule } from ‘@angular/core’;

import { BrowserModule } from ‘@angular/platform-browser’;

import { FormsModule } from ‘@angular/forms’; // <— JavaScript import from Angular

/* Other imports */

@NgModule({

imports: [

BrowserModule,

FormsModule // <— import into the NgModule

/* Other module metadata */

})

export class AppModule { }