Angular Attribute Directives
By AmarSivas | | Updated : 2021-01-05 | Viewed : 738 times

Directives contain a logic part which has specific behaviour. The Attribute directive is also used as program module or piece of logic which can be called anywhere in the application. If you have any idea about the Programming language, we use a class with specific logic which can be used anywhere in application. In angular, Directive is same as class. This tutorial explains about the Attribute Directive.
Table of Contents:
Angular Directive
Angular Directive is controller class comes
Angular provides three types of directives
-
Components
-
Attribute Directive
-
Structural Directive.
To find more about the Component you can refer Angular-Components.We will learn here Attribute Directive. In next article, we will learn about the Structural Directive.
Let’s consider a scenario of Highlighting the Html Element Border for understanding the Angular Directive. Here we are going to write a one function which can be used for highlighting Border.
export class AppComponent {
private changeBorderColor(color: string){}
}
We can write this as a function into appropriate component class as above. If we have a separate scenario as above, we need to rewrite the same code in another component as given below.
export class AppComponent1 {
private changeBorderColor(color: string){}
}
If we write the code as above then entire application would be tedious and difficult to handle. Instead of writing code in different places, we can write this function as function in separate
Declaration Of Attribute Directive
@Directive({
selector: '[appBorderColor]'
})
export class BorderColorDirective {
private changeBorderColor(color: string) {
//
}
}
<p appBorderColor [appBorderColor]="'yellow'">Highlight Border color</p>
The above given code is for example for Directive i.e.,
Attribute Directive Example
Please create
ng new Attribute-Directive-Example-App
<div id="ColorDiv">
<h1>Attribute-Directive-Example-App</h1>
<p [appBackGroundColor]="'yellow'">Highlight background with Yellow</p>
<p [appBackGroundColor]="color" defaultColor="violet">
Highlight background with Violet
</p>
<h4>Select Color to highlight</h4>
<select id="selectId" name="color" [(ngModel)]="selectedColor" >
<option *ngFor="let colorRf of allColors" >
{{ colorRf.colorName }}
</option>
</select>
<p [appBackGroundColor]="selectedColor">Highlight background with Selected Color</p>
<p><i>Mouse over To Change Color/Border Color !!</i></p>
<p appBorderColor [appBorderColor]="'yellow'">Highlight Border color</p>
<p [appColor]="'red'">Highlight Text color</p>
</div>
import { Component } from '@angular/core';
import { Color } from './color';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['#ColorDiv { margin-left: 5%; }','#selectId { width: 120px; }']
})
export class AppComponent {
color: string;
selectedColor: string;
allColors = [
new Color('color1', 'Green'),
new Color('color2', 'Red'),
new Color('color3', 'Yellow')
]
onProfileChange() {
//alert(this.selectedColor);
}
}
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appBorderColor]'
})
export class BorderColorDirective {
constructor(private el: ElementRef) { }
@Input() defaultColor: string;
@Input('appBorderColor') borderColor: string;
@HostListener('mouseenter') onMouseEnter() {
this.changeBorderColor(this.borderColor || this.defaultColor || 'red');
}
@HostListener('mouseleave') onMouseLeave() {
this.changeBorderColor('');
}
private changeBorderColor(color: string) {
if(color)
this.el.nativeElement.style.border = '1px '+color+' solid';
else
this.el.nativeElement.style.border = 'none';
}
}
We can see only three files here for remaining files of example application check in Docsconsole@GitHub Repository.
When we do mouse Hover then