How to control the multiple events based on function parameter in angular 8

Question

I have 3 divs and having the click event, I am handling the click event using a function in each event.Now suppose I don't want the click event for click3, that I need to control with parameter in function. I am not getting how to make it. Here is the code below https://stackblitz.com/edit/angular-9o3hgv?file=src%2Fapp%2Fapp.component.ts

app.component.html

<hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>
<div (click)="click1()">Click1</div>
<div (click)="click2()">Click2</div>
<div (click)="click3()">Click3</div>

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  function1() {
    alert("hi");
  }
  click1() {
    this.function1();
  }
  click2() {
    this.function1();
  }
  click3() {
    this.function1();
  }
}

you want to know when you are on your click3 function is that right ? why not just add a parameter so you can know when you are inside click3 — Alann
– Alann, Commented Oct 14, 2020 at 8:33
No, suppose I don't want the click event when I click on click3, that time I can remove this.function1() from click3, but instead of that I want to handle in generic way or by using parameter inside function, once I remove the parameter this.function1() will not work — anguler-developer
– anguler-developer, Commented Oct 14, 2020 at 9:18

Emilien · Accepted Answer · 2020-10-14 08:34:46Z

1

Do you need something like this ?

<div (click)="click(1)">Click1</div>
<div (click)="click(2)">Click2</div>
<div (click)="click(3)">Click3</div>

click(item: number): void {
  switch(item) {
    case 1:
      // ... Your logic
      break;
    case 2:
      // ... Your logic
      break;
    case 3:
      // ... Your logic
      break;
  }
}

answered Oct 14, 2020 at 8:34

Emilien

2,7534 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anguler-developer Over a year ago

Thanks for your answer, but I cannot modify anything in html as per my project suppose I don't want the click event when I click on click3, that time I can remove this.function1() from click3, but instead of that I want to handle in generic way or by using parameter inside function, once I remove the parameter this.function1() will not work

Eliseo · Accepted Answer · 2020-10-14 11:54:33Z

0

you can always write

<div (click)="condition && click3()">

//or

<div (click)="condition?click3():null">

If you can not change the .html in your function

click3()
{
   if (condition)
       function(1)
}

But sure I don't understand your question

answered Oct 14, 2020 at 11:54

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to control the multiple events based on function parameter in angular 8

app.component.html

app.component.ts

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.component.html

app.component.ts

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related