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

• javascript
• parameter-passing
• angular8
• ngfor

• use (click)="function". – Naseer Commented Jan 8, 2020 at 6:25
• 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 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 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 Commented Jan 8, 2020 at 6:51
• @AhmadHabib are you using angularJs or angular>=2 – Sameer Commented Jan 8, 2020 at 6:58

3 Answers 3

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>

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>

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