Skip to content
corpus.web

Attribute Directives

Attribute directives change how an existing element looks or behaves, which is what separates them from structural directives

Baseline Angular 22.1.1
Kind Concept
View source

What are attribute directives, and how do they differ from structural directives like NgIf and NgForOf?

Structural directives add, remove, or change the DOM tree. Attribute directives change the appearance (style) or behavior of a DOM element, component, or other directive. That's the key difference.

Class binding

In real apps, we often need to add or remove CSS classes based on conditions. For example, when a tab is selected, it gets a tab-active class while the others don't:

html
<div [class.tab-active]="isTabActive">some content</div>

This is property binding: when isTabActive is true, the element's classList includes tab-active; when false, it doesn't.

You can also bind the entire class attribute:

html
[class]="classExpr"

classExpr can be a string, an array of strings, or an object — object keys with truthy values are added, falsy keys are removed.

TypeValue
String"my-class-1 my-class-2 my-class-3"
Array of strings['foo', 'bar']
Object{ foo: true, bar: false }

ngClass works similarly to [class]="classExpr", but class binding is generally preferred over ngClass.

Style binding

Sometimes you need to bind inline styles. Style binding syntax:

[style.property]="expression"

The expression evaluates to string | undefined | null. Example:

html
<div [style.width]="someValue"></div>

With a unit suffix: [style.property.unit]="expression"

The expression evaluates to number | undefined | null. Example:

[style.height.%]="containerHeight"

You can also bind the entire style object:

[style]="styleExpr"

TypeValue
String"width: 100%; height: 100%"
Array of strings['width', '100px']
Object{ width: '100px', height: '100px' }

ngStyle is similar, but style binding is recommended in most cases.

Note: style property names accept both dash-case and camelCase — for example, font-size and fontSize both work.

Summary

We've looked at built-in attribute directives for class and style binding, so you can style elements based on component data.

Further reading:

Youtube Video

Attribute Directives
Attribute Directives

0%