Create an angular2+ app:

First we need to create an angular app using "ng new" command, create an app using below command:

ng new angular-dir

cd angular-dir

npm install

After successful npm install, we need to create a directive in your app, so go to the folder "src/app" and follow the below steps:

Create a test.directive.ts file.

In this step, we will create a directory and further we will use this directory throughout the app. To do this we need to Create a file name "test.directive.ts" ( src/app/test.directive.ts ) and write the below code in this file.

                          import { Directive, ElementRef, OnInit } from ‘@angular/core’; 
                          @Directive({
                            selector: ‘[test-directive]’
                          });
                          export class TestDirectives implements OnInit {
                            constructor(private elementRef: ElementRef) {}
                            ngOnInit() {
                            this.elementRef.nativeElement.innerHTML =’<h1>Hello World</h1>’;
                            }
                          }
                          
                      

Now your custom directive has been created .

Now you will have to import this custom directive in app.module.ts.

After creating the directory, you need to add this directive in your module, to do this import and add this directive in your "app.module.ts"

app.module.ts:

                      import { NgModule } from ‘@angular/core’;
                      import { AppComponent } from ‘./app.component’;
                      import { TestDirectives } from ‘../directives/test.directive’;
                      @NgModule({
                         declarations: [
                         AppComponent,
                         TestDirectives
                       ],
                      imports: [],
                      providers: [],
                      bootstrap: [AppComponent]
                      });
                      export class AppModule { }
                    

Now your directive has been imported in your app successfully.

Use your custom directive.

Now you are free to add this custom directive any where within the module like this:

<div test-directive></div>;

See the output.

In the output you can see the "Hello World" append in your dom just because of your custom directive

---

Conclusion:

In this article, we tried to describe about the custom directive. Hope you are able to write the custom directive in angular2+ app.