Wednesday, July 8, 2020
therichposts@gmail.com
Angular 8Angular 9Angular7

Angular 9 – Multiple types of click events

Angular 9, Angular 10
Views

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. 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.