Built-in directives
Directives are classes that add additional behavior to elements in your
Angular applications. Use Angular's built-in directives to manage forms,
lists, styles, and what users see.
See the live example / download example for a working
example containing the code snippets in this guide.
The different types of Angular directives are as follows:
DIRECTIVE TYPES DETAILS
Components Used with a template. This type of directive
is the most common directive type.
Attribute Change the appearance or behavior of an
element, component, or another directive.
directives
Structural Change the DOM layout by adding and
removing DOM elements.
directives
This guide covers built-in 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.
Many attribute directives are de�ned through modules such as the
CommonModule , RouterModule and FormsModule .
The most common attribute directives are as follows:
COMMON
DETAILS
DIRECTIVES
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 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
Add or remove multiple CSS classes simultaneously with ngClass .
To add or remove a single class, use class binding rather than
NgClass .
Import in the component
To use NgClass , import CommonModule and add it to the component's
imports list.
src/app/app.component.ts (CommonModule import)
{ } '@angular∕common';
∕* . . . *∕
@Component({
standalone: ,
∕* . . . *∕
imports: [
, ∕∕ <-- import into the component
∕* . . . *∕
],
})
{
∕* . . . *∕
}
Using 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> .
src/app/app.component.html
<!-- toggle the "special" class on∕off with a
property -->
[ngClass]="isSpecial ? 'special' : ''" This div
is special
Using 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.
src/app/app.component.ts
currentClasses: < , > = {};
∕* . . . *∕
setCurrentClasses() {
∕∕ CSS classes: added∕removed per current state
of component properties
.currentClasses = {
saveable: .canSave,
modified: ! .isUnchanged,
special: .isSpecial,
};
}
2. In the template, add the ngClass property binding to
currentClasses to set the element's classes:
src/app/app.component.html
[ngClass]="currentClasses" This div is
initially saveable, unchanged, and special.
For this use case, Angular applies the classes on initialization and in
case of changes. The full example calls setCurrentClasses() initially
with ngOnInit() and when the dependent properties change through a
button click. These steps are not necessary to implement ngClass . For
more information, see the live example / download example
app.component.ts and app.component.html .
Setting inline styles with
Import in the component
To use NgStyle , import CommonModule and add it to the component's
imports list.
src/app/app.component.ts (CommonModule import)
{ } '@angular∕common';
∕* . . . *∕
@Component({
standalone: ,
∕* . . . *∕
imports: [
, ∕∕ <-- import into the component
∕* . . . *∕
],
})
{
∕* . . . *∕
}
Using in your component
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 de�nes three styles, based on
the state of three other component properties.
src/app/app.component.ts
currentStyles: < , > = {};
∕* . . . *∕
setCurrentStyles() {
∕∕ CSS styles: set per current state of
component properties
.currentStyles = {
'font-style': .canSave ? 'italic' :
'normal',
'font-weight': ! .isUnchanged ? 'bold' :
'normal',
'font-size': .isSpecial ? '24px' :
'12px',
};
}
2. To set the element's styles, add an ngStyle property binding to
currentStyles
