Pass data to custom directive from component/HTML in Angular2+ application

Let's start

Create an angular2+ app:

First we need to create an app using "ng new" command, let's create an app using below command:

ng new ang-directive

cd ang-directive

npm install

After successful "npm install" your angular demo app is created, Now open your terminam/CMD and locate your project root and follow the below steps:

Passing the data to custom directive from component/HTML in Angular2+ application, we need to create a custom directory, to do this go to your app and then go to src/app folder and create a file "test.directive.ts" and write the below code:

test.directive.ts: (src/app/test.directive.ts)

                      import { Directive, ElementRef, Input, OnInit } from ‘@angular/core’; 
                      @Directive({
                        selector: ‘[input-box]’
                      }); 
                        
                      export class TestDirectives implements OnInit {
                          @Input() nameData: string;
                          @Input() valueDate: string;
                          constructor(private elementRef: ElementRef) {
                        }
                        ngOnInit() {
                          console.log(“input-box keys : “, this.nameData, this.valueDate);
                        }
                      }
                      

Now, your directive has been created and you need to add this directive into your `app.module.ts`as:

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

You will have to use your directive in your html and send data to the directive like in below code.

I am sending `nameData` and `valueDate` to the `test.directive.ts`:

<div input-box [nameData]="'lightcyan'" [valueData]="'CYAN'"></div>

or

<div input-box [valueDate]="componentObject.name" [valueDate]="componentObject.value"></div>;

Now, you are done, go to the console and see the output of line "console.log(“input-box keys : “, this.nameData, this.valueDate);". Now you can use data in the directive accordingly.

---

Conclusion:

In this article, we learned how we can create a directory in angular 2+, and how we can pass data from component/HTML to the directory.