Trigger click event in Angular 5 and 6

By Faruque Ahamed Mollick

In this post, I am going to show you how to trigger click event in Angular 5 and 6.



Angular 5 and higher version already has some event bindings to respond to any type of DOM event. Here we have to bind the click event to detect the click from the user.

To bind the click event to the DOM, we have to surround the click event name in parentheses and pass a method name inside quotes after the equal sign after event name. Later, I am going to show you where to create the method.

For better understand let’s see in our example. Below is our HTML button which calls the click event:

<button (click)="on_click()">Click on me!</button>

Now we have to create a method on_click() inside the component class and write all the necessary code inside this method.

Below is the complete TypeScript code example inside the component file:

@Component({
  selector: 'app-click-event',
  template: '
    <button (click)="on_click()">Click me!</button>
    '
})
export class ClickMeComponent {

  on_click() {
    alert("Click event triggered!");
  }
}

Off-course, you can create your own HTML file and put the templateURL instead of a template with HTML code. In this example, we have pass HTML to our component file instead of creating an external HTML file.

If you created your HTML file and call it through templateURL, In that case, you can put your button just like we have put it here in the TypeScript file. It will work as same as you put your button code in component TypeScript file.

 

Also, read

 

Now you can put all your code inside the on_click() method we created inside the ClickMeComponent class.

That’s it. We are ready to test our code. let’s start your Angular server and open it on your browser. If you see the alert message “Click event triggered!”, then you have successfully triggered the click event as we have alert this message inside the on_click method of ClickMeComponent class.

So we have successfully triggered the click event in Angular 5 and 6. I hope you have understood and it’s helpful to you.

Leave a Reply

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