7 Directives decorator

How to Create Custom Directives?

Create a Custom Directives -
Let's start to create a simple directive. For more detail kindly refer the link.... 

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

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

How to Create Custom Directives? How to Create Custom Directives? Reviewed by Anil Singh on 11:04 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^