Angular Tutorials and Guides

Angular Attribute Directives

By | | Updated : 2021-01-05 | Viewed : 738 times

Attribute Directive tutorial

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.

Angular Directive

Angular Directive is controller class comes @Driective decorator class. Directive manipulates the appearance or behaviour of a DOM element. The @Driective decorator class will be used for changing definition of the class. To know more about the decorators you can refer this article Decorators@Angular-Components.

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.

Angular Directive Explanation
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.

Angular Directive Explanation
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 Directive. So, the application will be easy to maintain. We can call this Directive class anywhere in the application where we want.

Declaration Of Attribute Directive

BorderColorDirective.ts
@Directive({
  selector: '[appBorderColor]'
})
export class BorderColorDirective {

   private changeBorderColor(color: string) {
	//
  }
}
borderColorTemplate.html
<p appBorderColor [appBorderColor]="'yellow'">Highlight Border color</p>

The above given code is for example for Directive i.e., Attribute Directive. Here Directive is an angular Controller class which should be annotated with @Directive. This above given BorderColorDirective.ts class is an example for Attribute Directive. So, it should have one selector [appBorderColor]. In borderColorTemplate.html, the same selector should be written as attribute of Host Html element which is in paragraph element. Whenever we hover on this Host element then Angular will look up and create the Directive Class which has same appBorderColor attribute as a selector. So specific Directive functionality will be located on the Hosting Html element.

Attribute Directive Example

Please create Angular CLI project by using CLI Command Interface with below given command. If you are not familer with Angular CLI Setup please look into this tutorial HelloWorld-App.

Create Angular Application using CLI
ng new Attribute-Directive-Example-App
app.component.html
<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>
app.component.ts
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);
  }
}
borderColor.directive.ts
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.

Code Explanation: When we hover on Hosting paragraph element with attribute appBorderColor then appropriate Directive will provide response with functionality. Here in Directive, we used the HostListner for responding of the user interactions on Hosting Element.

When we do mouse Hover then @HostListener('mouseenter') onMouseEnter() function will provide response to the element. Same thing will be happened when mouseLeave on element. Please look into the above code snippet. Here tag attribute value [appBorderColor]="'yellow'" bound with @Input('appBorderColor') borderColor: string;. For more about property binding plase refer the Sharing-Data-in-Angular-Components

Leave A Reply