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 { }