Dynamically inserting ion-button (click)="openSystem3()"

Ionic Framework
1

Hi, I’m using a JSON file to populate a page using

*ngFor="let product of getProducts()

I’m using in-app browser @awesome-cordova-plugins/in-app-browser/ngx as I would like the links to open this way if possible

In the dynamic template I would like to populate the web and map button

ion-button (click)=“openSystem3()”

using {{ product.web }} but I cannot get it to work using

(click)=“{{ product.web }}”

Can anyone help?

With thanks!

2

i don’t know what you want to achieve,
but, have you tried to use (click)=“product.web” or [(click)]=“product.web” ?

anyway, if i’m not wrong, having a function like this *ngFor=“let product of getProducts()” is bad for performance because it’s called hundred of times.

3

None of these works. Absolutely stuck on this.
In more detail the JSON contains:

{
id:3,
link: ‘/view-tours/3/’,
title: ‘Product title goes here’,
web:‘openSystem4()’,
loctype: ‘Tours’
},

The openSystem link is hardcoded in the ts file - and contains a url eg:

openSystem3(){
this.iab.create(‘https://www.url.com/’, ‘_system’);
}

Maybe there’s a better way to achieve this?

I’m using a filter on the let product of products which seems to work well. Any better way to achieve the same?

*ngFor=“let product of getProducts() | filterbyid:{loctype: ‘Tours’}”

4

actually the thing you are triying to achieve is very simple

you can just pass some parameters to your function call
you don’t have to pass openSystem3 but the parameters you need to open, like the website

like this


{
id:3,
link: ‘/view-tours/3/’,
title: ‘Product title goes here’,
link: "https://www.url.com/"
loctype: ‘Tours’
},

 (click)="yourFunction(item.link)"

yourFunction(link) {
this.iab.create(link);
}

instead of getProducts you can just do something like

getProducts() {

// here you make an api call or whatever you need to fetch data

this.yourItem = response from api call.
}

and yourItem may have the data of you previous json for example
5

That is immensely helpful. Thank you very much!

1 Like