Passing parameter onclick, in a loop using angular8

Question

I have an array of objects. i am iterating that in loop and passing each item's name to onclick which targets a function openIt(val) in app.js file which is in assets folder. ie

Angular Code:

<div *ngFor="let item of listArray">
<button class="tabopen" onclick="openIt(item.name)">{{item.name}}</button>
</div>

app.js Code:

function openIt(data) {
console.log(data);
}

In my openIt function in app.js file i am not getting item.name. In my console it displays error that item is not defined. But when i pass static data i.e onclick="openIt('sample_data')"it does not show any error.

Even though item.name also exists i am getting correct values against this as well. I am not getting that why i am not able to pass iterative data to the parameters.

I want to target the function in my app.js file which is not in the same component. When i use (click) it looks for the openIt() in my .ts file and displays openIt is not a function — Ahmad Habib
– Ahmad Habib, Commented Jan 8, 2020 at 6:29
So basically you want to call a function of another component, You can use shared service See this example (stackblitz.com/edit/angular-shared-service) — Sameer
– Sameer, Commented Jan 8, 2020 at 6:32
@SameerKhan no i want my component to communicate with a simple app.js file in my assets folder — Ahmad Habib
– Ahmad Habib, Commented Jan 8, 2020 at 6:51

Mihai Alexandru-Ionut · Accepted Answer · 2020-01-08 06:29:00Z

12

If you're using Angular then you should go with (click) because when you declare an event handler you need to surround the DOM event name in parentheses and assign a template statement to it.

<button class="tabopen" (click)="openIt(item.name)">{{item.name}}</button>

edited Jan 8, 2020 at 6:29

answered Jan 8, 2020 at 6:24

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

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

5 Comments

Ahmad Habib Over a year ago

But, won't it look for the function in same component's TS file then? I want to target a function in app.js file due to some reasons

Mihai Alexandru-Ionut Over a year ago

@AhmadHabib if the previous version works for you then this should work as well because I just change the event handler with angular version of click

Ahmad Habib Over a year ago

I tired this but it says openIt() is not defined as it is looking for this function in same component. I am still wanting to target openIt() function in my app.js file located in assets folder.

Mihai Alexandru-Ionut Over a year ago

@AhmadHabib, then you should declare a function in your current component which calls another function from app.js

Ahmad Habib Over a year ago

That worked. I called a function in current component with (click) event and from that event i called openIt() that was in my app.js file. Thank you so much mate. Much appreciation

Artur T · Accepted Answer · 2020-01-08 06:33:46Z

2

event binding: varsion 1 on-click="function", version 2 (click)="function"

<div *ngFor="let item of listArray">
<button class="tabopen" on-click="openIt(item.name)">{{item.name}}</button>
</div>

<div *ngFor="let item of listArray">
<button class="tabopen" (click)="openIt(item.name)">{{item.name}}</button>
</div>

answered Jan 8, 2020 at 6:33

Artur T

3543 silver badges4 bronze badges

Comments

Mahdi jokar · Accepted Answer · 2023-10-15 10:06:06Z

0

Yoc can also send item and get all properties of item in .ts file.

Html file:

<button class="tabopen" (click)="openIt(item)">{{item.name}}</button>

ts class:

 openIt(item){
        consol.log('item==>' , item)
    }

answered Oct 15, 2023 at 10:06

Mahdi jokar

1,2676 gold badges30 silver badges51 bronze badges

Collectives™ on Stack Overflow

Passing parameter onclick, in a loop using angular8

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related