Scribd
Upload
23 views

Angular - Built-In Directives

Built-in directives allow adding additional behavior to elements in Angular applications. Common built-in directives are NgClass for adding/removing CSS classes, NgStyle for adding/removing inline styles, and NgModel for two-way data binding. These directives are defined through modules like CommonModule and listen to and modify element behavior.

Uploaded by

Babu Sharath
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Angular - Built-In Directives

Built-in directives allow adding additional behavior to elements in Angular applications. Common built-in directives are NgClass for adding/removing CSS classes, NgStyle for adding/removing inline styles, and NgModel for two-way data binding. These directives are defined through modules like CommonModule and listen to and modify element behavior.

Uploaded by

Babu Sharath
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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

You might also like