How to make a Custom directives in angular with example
Introduction to angular:
hello dear learner and visitor thanks for choosing us .Angular is the JavaScript open source SPA(Single Page Application) framework .we can create our application using its MVVC architecture with advanced feature ,easy way of implementation and configuration. In angular to make any web application oor hybrid is very easy because the structure of of project is so easy to understand for any web developer.we can also make hybrid and native application with the help of other framework with angular.We have started a series of Angular you can search you requires topic of angular or you can go through all the course free of cost.Our goal is to help you and give best content that can be understandable by beginners and others.
today's topic is al about how to create a custom directive in angular and will also discuss about some inbuilt directives in angular.
What is directives in angular ?
So directives are the features of angular with help of which we can do modification , to change the behaviour of the HTML elements or we can say DOM elements .
There are many inbuilt directives in angular like ngStyle ,NgClass, NgModel,ngIf,ngFor and many more there are the inbuild directive which helps us to implements dynamic data rendering and to change the look and feel of HTML elements.Most of the inbuilt directives are written in camel safe .
In angular we can also create custom directives to achieve our required changes in our web application. So are going to discuss about the custom directives with example.
Custom directives in angular
So we are to ready to know about custom directives to make one custom directive we have to understand first what are the directives to understand them deeply or there core use just follow this link.
Ok after understanding core use of directives in angular you can easily get all this what i am going to show you with example .
We are going to create one attribute custom directive and another one will be structural directive
Attribute Custom Directive
Custom directives are nothing but one component means we can write the code for custom directive as we create a component in angular.For that we just need to change the @component decorator to @Directive decorator and your logic for custom functionality that's it.
First of all create one directive file with your like name like i am creating a file app.elementHighlight.directive.ts yeah ok now we are going to create one custom directive class and one function that will apply the background color for HTML element wherever we will use this directive .
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlightText]'
})
export class HighlightTextDirective {
constructor(private eleRef: ElementRef) {
eleRef.nativeElement.style.background = 'green';
}
}
here in this example we have created one directive class with Directive decorator and one selector so that we can use inside any HTML element .And with element reference we can target to that DOM element to which we want to apply our custom changes .
show to make this directive available ove the applications components we have to add this inside the declaration section of the module .
import ...;
import { HighlightTextDirective } from './app-highlightText.directive';
@NgModule({
declarations: [
AppComponent,
HighlightTextDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here we have added the HighlightTextDirective directive inside declraration section.
Now we are ready to use this directive inside any component having access to this module.
So inside component's html file we are going to use this directive for one HTML element.
<p appHightlightText>Highlight Text with custom color</p>
Here we have used the directive's selector appHightlightText to tell directive that this the html element to add custom color .After adding this much you can see the custom color is highlighting you text.
Structural Custom Directive
As we have created a custom attribute directive we can also create a structural directive in same way means we have to create directive like we did before and one selector and logic .
So now we are going to create one directive that will take boolean value if the boolean input will treu then it will show that HTML element other it will hide the HTML element ..
First of all we have create a file with a name like this inside app/src folder app-showhide-directive.ts
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[isShow]'
})
export class customShowHideDirective {
constructor(
private tempRef: TempRef<any>,
private viewContainer: ViewContainerRef) { }
@Input() set isShow(Inputvalue: boolean) {
if (!Inputvalue) {
this.viewContainer.createEmbeddedView(this.tempRef);
} else {
this.viewContainer.clear(); }
}
}
Here we have used Directive decorator to provide the class all required meta data required for a directive .Input decorator helps us to share data between components.tempRef are the
show to make this directive available ove the applications components we have to add this inside the declaration section of the module .TempRef is the embedded template that helps to instantiate the embedded view .Thes views are linked to template to rendered .
import { customShowHideDirective } from './app-showhide.directive';
@NgModule({
declarations: [
AppComponent,
customShowHideDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now we can use this directive like this in our HTML elements .
<p *isShow="true">True</p>
<p *isShow="false">False</p>
here if the value will true this will show the element other it will hide that element .
Like this we can create custom directive according to our requirements to add custom behavior to the HTML DOM elements .
Thanks for visiting our site i hope this article helpful fot you any query related to this topic can comment us or contact us.
Tags:
Angular