
Angular Attribute Directive
So far we have learned about Directive and Structural directive, now it is time to understand attribute directive in detail. In this post, i will try to explain attribute directive with example.
What is Attribute Directive
Let’s first understand what is attribute directive with the help of simple definition.The Attribute directive changes the appearance or behavior of an existing element.
Internal Structure
@Directive({ selector: '[ngClass]' }) class NgClass implements DoCheck { set klass: string set ngClass: string | string[] | Set<string> | {...} ngDoCheck(): void }
Writing code for Attribute Directive
Let’s first create a separate component to practice attribute directive. First of all, run the existing project “hello-world” and then invoke the below command to create a separate component.ng g c attribute-directive --spec false
The project structure should look like below.

In this example, i will try to change the appearance of the existing element by using [ngStyle] and [ngClass] attribute directives in different ways. So let’s get started and open the template file.
Method 1 : Passing attribute value directly.
You can pass the attribute value directly as below. The attribute ‘ngStyle’ supports all the qualified style attributes but in different ‘camelCase’ format.
For example
backgroundColor : ‘red’
paddingTop: ‘2px’
fontFamily: ‘sans-serif’
src/app/attribute-directive/attribute-directive.component.html
<div [ngStyle] = "{backgroundColor: 'red'}"> Welcome to the attribute directive example. </div>
Invoke the newly created component.
src/app/app.component.html
<app-attribute-directive></app-attribute-directive>
Method 2 : Using Component variable
Instead of passing style value directly, you can also use component variable to set style value.
src/app/attribute-directive/attribute-directive.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-attribute-directive', templateUrl: './attribute-directive.component.html', styleUrls: ['./attribute-directive.component.css'] }) export class AttributeDirectiveComponent implements OnInit { backgroundColor: string = 'yellow'; textColor: string = 'red'; constructor() { } ngOnInit() { } }
As you can see in above component, we have two variables backgroundColor and textColor which holds some style values. Let’s use them in template.
src/app/attribute-directive/attribute-directive.component.html
<div [ngStyle] = "{backgroundColor: backgroundColor, color: textColor}"> Welcome to the attribute directive example. </div>
Method 3 : Using Component methods to get style value
If you want to apply some style based on some business logic then you can invoke the component method directly inside attribute directive.
src/app/attribute-directive/attribute-directive.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-attribute-directive', templateUrl: './attribute-directive.component.html', styleUrls: ['./attribute-directive.component.css'] }) export class AttributeDirectiveComponent implements OnInit { backgroundColor: string [] = [ 'red', 'blue', 'green' ]; textColor: string = 'white'; constructor() { } ngOnInit() { } getBackgroundColor(id: number) { return this.backgroundColor[id]; } }
src/app/attribute-directive/attribute-directive.component.html
<div [ngStyle] = "{backgroundColor: getBackgroundColor(1), color: textColor}"> Welcome to the attribute directive example. </div>
Writing [ngClass]
If you don’t to apply any inline style like in above example, you can use another directive which is [ngClass] to add or remove some CSS classes as well.So let’s write some CSS class first.
src/app/attribute-directive/attribute-directive.component.css
.redBackground { background-color: red; color: white; } .greenBackground { background-color: green; color: white; }
Method 1 : Directly providing class
One way is to provide class name directly to the attribute directive if you don’t want any condition.
src/app/attribute-directive/attribute-directive.component.html
<div [ngClass] = "'greenBackground'"> Welcome to the attribute directive example. </div>
Method 2 : Adding some condition
You can also add some conditions in this directive. Let’ look at the below code.
src/app/attribute-directive/attribute-directive.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-attribute-directive', templateUrl: './attribute-directive.component.html', styleUrls: ['./attribute-directive.component.css'] }) export class AttributeDirectiveComponent implements OnInit { errorFlag : boolean = true; constructor() { } ngOnInit() { } }
src/app/attribute-directive/attribute-directive.component.html
<div [ngClass] = "{'redBackground': errorFlag == true, 'greenBackground': errorFlag == false}"> Welcome to the attribute directive example. </div>