Hello Dev.
I can provide an explanation for step by step angular 9 custom directives example. you could see how to create custom directive in angular 9. This article will provide you simple instance of angular 9 create custom directive instance. this web article will give you simple instance of custom directive in angular 9 example.
In this educational, i'm able to give an explanation for you how to custom attribute directive in angular 9/8 application. Angular attribute directive can be easy described as a component without any template. instead of it's directly the usage of the element it's applied to. you do not need to write too many code for html element, you could genuinely create custom attribute with some logical and you could without difficulty reuse it with other element too.
In this example, we will create appBtn directive. on this directive we can add two event one is mouseenter and mouseleave. the usage of that event will change color of button font. i can take one button and we can add appBtn attribute.
So, let's see bellow step to creating custom directive in angular 9.
Step 1: Create New App
You can easily create your angular app using bellow command...
ng new my-module-app
Step 2: Create Custom Directive
After creating successfully app, we need to create directive using angular cli command. angular provide command to create directive in angular application. so let's run bellow command to create admin module...
ng generate directive btn
now they created btn.directive.ts and in this file we will write code for custom directive. we will import ElementRef, Renderer2 and HostListener. we will also write mouseenter and mouseleave event. so let's update as like bellow...
src/app/btn.directive.ts
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
@Directive({
selector: '[appBtn]'
})
export class BtnDirective {
constructor(
private elementRef: ElementRef,
private renderer: Renderer2
) {
this.setFontColor('red')
}
setFontColor(color: string) {
this.renderer.setStyle(
this.elementRef.nativeElement,
'color',
color
)
}
@HostListener('mouseenter') onMouseEnter() {
this.setFontColor('blue')
}
@HostListener('mouseleave') onMouseLeave() {
this.setFontColor('red')
}
}
Step 3: Import Module to module.ts file
In last step, we will simply import BtnDirective to module.ts file, so, let's update that file as like bellow...
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BtnDirective } from './btn.directive';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, BtnDirective ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Step 4: Update Component HTML File
here, we have to update our app component html file, we need to add simple button with custom directive, so let's update it as like bellow...
src/app/app.component.html
<button appBtn>My Button</button>
Now we are ready to run our example, you can run by following command...
ng serve
i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.
