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.

Lutenist

use (click)="function". – Help

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 – Lutenist

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) – Apostolic

@SameerKhan no i want my component to communicate with a simple app.js file in my assets folder – Lutenist

@AhmadHabib are you using angularJs or angular>=2 – Apostolic

@SameerKhan i am using angular6 – Lutenist

Now I got your question, you have a external/third party library and want to invoke a function of that file - this answer can help you, take a look into it https://mcmap.net/q/1769663/-call-a-function-of-external-js-file-in-angular-5-component – Apostolic

Answer 1

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>

Playgoer

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 – Lutenist

@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 – Playgoer

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. – Lutenist

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

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 – Lutenist

Answer 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>

Geibel

Answer 3

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)
    }

Gash