Create a Custom Directives -
I assuming you have installed the Angular CLI and all the necessary configurations are running in your app. Now, go to your project directory and execute the below CLI command for creating your custom directive –
ng g directive myCustom
After execute the above CLI command, created two files in the project - src/app folder
1. src/app/my-custom.directive.spec.ts
2. src/app/my-custom.directive.ts
And update files reference automatically in your project module – “src/app/app.module.ts”
Lest see in the code-sample, how it look like-
my-custom.directive.ts –
import { Directive } from '@angular/core';
@Directive({
selector: '[appMyCustom]'
})
export class MyCustomDirective {
constructor() { }
}
And app.module.ts –
import { MyCustomDirective } from './my-custom.directive'
//AppModule class with @NgModule decorator
@NgModule({
//Static, this is the compiler configuration
//declarations is used for configure the selectors.
declarations: [
AppComponent,
MyCustomDirective,
],
//Composability and Grouping
//imports used for composing NgModules together.
imports: [
BrowserModule
],
//Runtime or injector configuration
//providers is used for runtime injector configuration.
providers: [],
//bootstrapped entry component
bootstrap: [AppComponent]
})
export class AppModule { }
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|