Wednesday, July 8, 2020
Angular 8Angular 9Angular7

Angular 9 – Multiple types of click events

Angular 9, Angular 10

Hello to all, welcome again on In this post, I will tell you, Angular 9 – Multiple types of click events.

Post Working:

In this post, I will show you multiple types of click events like click function with parameters etc.

Here is the code and please use carefully:

1. Here is the code for app.component.ts file:


export class AppComponent implements OnInit {
  nameDynamic = "Therichpost";

  //Simple Click Function
  alert("click me clicked!!");

  //Click Function with event trigger
    alert(event); //Mouse click event

  //Click Function with Dynamic Parameter value

  //Click Function with Multiple Parameters values
  clickme4(event, name)
  alert('Name= ' + name);




2. Here is the code for app.component.html file:

<!-- I have added Bootstrap 4 so I am adding bootstrap 4 classes -->

<button class="btn btn-primary" (click) = "clickme()">Simple Click Function</button>

<button class="btn btn-primary" (click) = "clickme2($event)">Click Function with Parameter</button>

<button class="btn btn-primary" (click) = "clickme3(nameDynamic)">Click Function with Dynamic Parameter</button>

<button class="btn btn-primary" (click) = "clickme4($event, nameDynamic)">Click Function with Multiple Parameter</button>


If you have any kind of query then pleaes do comment below.


Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.