How to Bind Angular 5 Event Binding


In this article, we are looking out angular 5 event binding. So we will learn how to bind an angular event to the HTML buttons. We are using the bootstrap framework to create buttons. Angular is one of the most amazing client-side frameworks to a responsive and attractive application. Angular provides us to create and generate events. Basically, these events will use to execute functions. This function maybe returns a value or generate some task for us.

So in this article, we are creating this.

Angular 5 Event Binding

So, In this above tutorial, we are creating two buttons. In the first button we are creating click event and the second one we will create hover effect. So when you click on the first button you will see the “You click Me !” Message.

On the second button, we will create hover event. So when you hover the second button you will see the “You Hover Me !” Message. In the end, we will create tow boxes that represent messages. Basically, this tutorial is for generating an event on click and on hover mouse event.

So let’s jump into the code.

Create an Angular App

So first we will create an angular app. The following commands use to create an angular app.

Create an Angular App

This command will create the my-app application. You can choose your own application name. just remove then my-app and remain it with your angular app name.

app.component.html

After creating the angular app you got the file hierarchy. In this file hierarchy, you will get the predefined component. we do not create another component except creating another component we will use the default component.

So in the app.component.html file, we will insert this code.

In the first div, we will insert two buttons. we added text-center and margin-top bootstrap class to this div and then create two buttons of bootstrap. So the first button is bootstrap danger button and the second one is bootstrap warning button.

On these buttons, we will bind an event. So bind event we will create a click event for the first button. So to bind the event we will write this code (click) = “onClickMe()”. In this code, we will first write the event name      (event-name) and then specify the function name (event-name) = “function-name”.

So we will create this function in the .ts file of the component class.

After that, we will show the message using angular binding. To bind the event we will use {{ }} double curly brackets and specify the name of the property in the property in the curly brackets. We created this property in the component class.

To specify attractive user interface we had just used the bootstrap framework. You are free to use your own framework.

app.component.ts

So in this file, we will create a function for the event. So when you click on the button we will call this function. You can create your own functions. In this tutorial, we will just create a function to display the message.

Let’s understand the code first.

In this code, we created two property. clickmessage and mousemessage. In app.component.html file we specify the property in the {{ }} brackets.

After that, we will create a function for specifying the name for the properties. We will bind the onClickMe() function to the first button and then we bind the MouseoverMe() function to the second button.

So here in the function, we will just specify the text to the properties. In the first function, we will specify the You Click Me text to the clickmessage property. In the second function, we will specify You Hover me message to the mousemessage property.

So your app.component.ts file looks like this.

app.component.css

In the app.component.css file, we will style the component. Styling is not important in this tutorial because we are focusing on the event binding. So we will create some style to HTML elements.

In the above code, we just added the padding top and height for the two boxes.

Run your application

Now just run your application with the following command.

In the above command, we enter into the my-app folder and run the application.

So now when you click on the first click me button you will see the message of “You click Me !” and when you hover over the second button you will see the “You Hover Me !” message.

That’s the way to bind the event in angular 5. So now we had created angular 5 event binding. Now you will learn Angular 5 event binding. If you have any question then comment me in the comment section.

Follow us on the facebook page.

We will see you in the next article.

Thank You.

Leave a Reply

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