Change HTML Attribute Of DOM Element Using Custom Attribute Directives In Angular 6

Introduction

 

In this session, I will show you how we can change the appearance, such as text color, background color, and font size of the body content, of an HTML element using a custom attribute directive.

 

For more details of Angular 6, visit my following articles. 

1. Angular V6.1 Environment Set-up And Steps To Fix Set-Up Issue If Any
2. List Of Directives In Angular 6 And How To Use Them
3. Custom Attribute Directive Using Angular 6

Note

Before going through the session, I suggest you first visit the previous parts of the article and understand how to customize the attribute directive with a sample application. Here, I will show you the remaining sample application using Angular 6 to customize the attribute directive.

 

Custom attribute directives - User input text size

 

Code Ref of text-size.directive.ts,

import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';

@Directive({
     selector: '[MytextSize]'
})
export class TextSizeDirective implements AfterViewInit{
    @Input('MytextSize') tsize: string;
    constructor(private elRef: ElementRef) {
    }
    ngAfterViewInit(): void {
    this.elRef.nativeElement.style.fontSize = this.tsize;
    }
}

Code Description

Here, I have created a directive named as MytextSize. It will take user input text size.

 

Code of app.component.html

<p [MytextSize]="txtsize"> textSize Directive Demo using Bracket []</p>
<p bind-MytextSize="txtsize"> textSize Directive Demo using bind- prefix  </p>
<p MytextSize="{{txtsize}}"> textSize Directive Demo using Interpolation</p>

Code Description 

If the directive name is same as @Input() alias or property name, then we use our directive in HTML template as given above. We know that an attribute directive can be used using bracket [ ], prefix bind- and interpolation. By above two directives myColor and textSize, we observe different scenarios of using @Input(). Suppose we are using directive name as selector: '[textSize]' and we have a variable in our component that is app.component.ts as given below.

export class AppComponent {
   txtsize = '25px';
   colors = ['CYAN', 'GREEN', 'YELLOW'];
   myColor = '';
}

Then, find the different scenarios as described below.

 

Scenario 1

 

Directive name and @Input() property name are different with no alias.

@Input() tsize: string;

So, we use a directive as given below.

<p textSize tsize="{{txtsize}}"> textSize Directive Demo using Bracket []</p>

Use directive name and @Input() property name to take user input.

 

Scenario 2

 

Directive name and @Input() property name are same with no alias.

@Input() textSize: string;

Now, we can bind attribute directive as given below.

<p [textSize]="txtsize"> textSize Directive Demo using Bracket []</p>

Scenario 3

 

Directive name and @Input() alias are same no matter what the @Input() property name is.

@Input('textSize') tsize: string;

Again, we can use the attribute directive as given below.

<p [textSize]="txtsize"> textSize Directive Demo using Bracket []</p>

Output

 

 

Custom attribute directives - User input color name in HTML template.

 

Code of color-input.directive.ts

import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';

@Directive({
     selector: '[satyaColor]'
})
export class ColorInputDirective implements AfterViewInit{
    @Input() inputColor: string;
    constructor(private elRef: ElementRef) {
    }
    ngAfterViewInit(): void {
    this.elRef.nativeElement.style.color = this.inputColor;
    }
}

Code Description

 

To take the user input in a custom directive, I have created a property decorated with @Input(). We will create a myColor directive that will take user input color name in HTML template.

AfterViewInit - It is the lifecycle hook that is called after a component view has been fully initialized. To use AfterViewInit, our class will implement it and override its method ngAfterViewInit().  

 

Code of app.component.html

<div satyaColor inputColor="red">color input directive by Satya</div>

Code Description

 

Now in the HTML template, we can use satyaColor directive and it has taken input color name that is red in HTML Template.

 

OUTPUT

 

 

Custom attribute directives - Change text color, background color and font size

 

Code Ref of theme.directive.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({
     selector: '[satyaTheme]'
})
export class satyaThemeDirective {
    constructor(elRef: ElementRef) {
       elRef.nativeElement.style.color = 'blue';
       elRef.nativeElement.style.backgroundColor = 'yellow';
       elRef.nativeElement.style.fontSize = '70px';
    }
}

Code Description

I have created a custom attribute directive that will change text color, background color and font size. To change the HTML attribute we need to use ElementRef that has the property nativeElement and using it we can change HTML attribute of an element in the DOM. 

 

Code Ref. Of app.component.html

<div satyaTheme> Custom Attribute Theme Directive By Satyaprakash </div>

Code Description

 

Before using the satyaTheme attribute directive, we need to configure the satyaThemeDirective class in the application module in the declarations block of @NgModule. Now, we are ready to use satyaTheme directive. 

 

OUTPUT

 

 

Fetch source code from GitHub,

• Customize Attribute Directive Using Angular 6 In Depth
  
  Get the source code of my previous Angular 6 article from the GitHub.

• List Of Directives In Angular 6 And How To Use Them

Note 

Here, I have uploaded my source code by excluding the node_modules folder due to it being a big file and it can be downloaded by using NPM. NPM is the node package manager, which installs packages locally into a project, specifically into the node_modules folder.

 

SUMMARY

• User input text size and its different scenarios.
• User input color name in HTML template.
• Change HTML attribute of an element in the DOM.