Binding Event Using Host Property of @Directive 


In this article, we are binding event to the host property of Angular 6 @Directive. So in this tutorial, we are creating a simple binding of the event to the DOM element. In the previous article, we had created a simple @directive but there is still much more in the directive. Well, we know that directive is used to change the behaviour of the DOM element.

Basically, Event is used to create an specify mouse or key event on the render user interface. So here we will create a simple two events that generate an event on the text. We will create mouse over and mouse leaves events. You just need to follow up the steps and then you can learn how to make this possible.

So let’s jump into the code.

First, we will create an angular 6 app.

This command will create the my-directive app in angular 6.

This command will get you into the app root directory.

So now the following command will create then angular @directive. We will use this directive to make an attribute and specify the behaviour for the DOM element.

 

This command will create hover @directive and update the module.ts file of the current component. If you open your module.ts file then you will see the directive is already added to your import selector.

app.component.ts

So after creating your app, we will first update the app.component.ts file. In this file, we will create a class property and specify a string to it.

hover.directive.ts

In this file, we will create a code to make a directive attribute and will specify the behaviour for the element. Let show you what we had created.

  • In the above code, we import some modules. So we will import the Input, ElementRef, Renderer, and Directive Modules. Each module has their own specified task we don’t need to care about anything.
  • after that, we rename the selector as hover. If you wanted to specify the default name for the directive selector then it doesn’t matter.
  • after selector, we will create host selector here we will specify the event and function. Here you can specify which function is doing what with which event.

    In this code, you will see we specify the event and function.
  • After that in the Constructor, we will create two property of ElementRef and Renderer. ElementRef module selects the DOM Element and then we will render it with Renderer Module.
  • After we will create the function and specify the style to DOM element. Now here we will create two functions and specify a style to the DOM element.
  • In the first function we will change the colour of the element to black and if you leave your mouse from that element we will specify the red colour to that element.
  • In the function, we will create a function for renderer property. So here we will specify the setElementStyle function. In this function, we will specify the style for the specified DOM element.

app.component.html

In this file, we will just create a simple code where we will specify the name of the directive and change the behaviour of the DOM element.

So in this code, we just insert a division tag and specify style text align center. In this division tag, we will specify h2 heading tag with hover=’red’ directive.

In this code, we specify the name of the directive and the value. So value should be the valid colour of text. After that, we will create a button and specify value submit. After that specify hover attribute to this button. For the button, we specify blue colour and also specify the padding to it.

After that just run the serve command and execute the application.

After executing this command you are able to see that when you hover the mouse text colour will change to black. If you leave your mouse form the text then this will cause to change the colour to red.

The same thing is done with the button also.

You can create multiple properties and behaviour for the specified element as you want. So that’s all for this tutorial.

Now you are able to bind the event to the Directive. Now we had learned how to Binding Event Using Host Property.

That’s it.

We will see you in the next article.

Leave a Reply

Your email address will not be published. Required fields are marked *