Angular Attribute Directive -

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];
 }
}

As you can see above, we have an array to background colors and a method which returns the color based on input id. So let’s invoke this method in html template.

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() { }

}

As you can see above, we have one Boolean variable which will decide the class to add to the element. Let’s add some condition in html template.

src/app/attribute-directive/attribute-directive.component.html

<div [ngClass] = "{'redBackground': errorFlag == true, 'greenBackground': errorFlag == false}">
 Welcome to the attribute directive example.
</div>

CRUD Operation using AngularJS, RequireJS, Spring...

Spring Constructor Injection

Spring Setter Injection

Spring Autowiring

Angular Attribute Directive