Angular 9 – Multiple types of click events

Hello to all, welcome again on therichpost.com. 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
  clickme()
  {
  alert("click me clicked!!");
  }

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

  //Click Function with Dynamic Parameter value
  clickme3(name)
  {
    alert(name)
  }

  //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.

jassa

Thank you