Ionic / angular ngFor and click function

pass ngfor index to click event
click event inside ngfor
ionic 4 ngfor index
angular ngfor click not working
angular 7 ngfor click event
call function in ngfor angular 6
ionic ngfor
ngfor ionic 3

I recently started playing with Ionic. So I'm making an app with a sort of 'dictionary' in it. If I press a button an audio file plays a english or german translation of the dutch word. I'm working with a array in a JSON file called 'Opdracht1.json' in it there are values with the translation from Dutch to engels/german. X&Y are for rectangle positions, but that's not important! So as output I want to get an English or German word

    {"x": "365", "y": "12", "string": "steiger", "engels": "Jetty", "duits": "Der Steiger"},
    {"x": "459", "y": "65", "string": "kanaal", "engels": "Canal", "duits": "Der Kanal"},
    {"x": "117", "y": "210", "string": "Westkolk", "engels": "West lock", "duits": "Die Westkammer"},
    {"x": "503", "y": "151", "string": "Sluizencomplex", "engels": "Lock complex", "duits": "Der Schleussengruppe"},
    {"x": "488", "y": "249", "string": "wachthaven", "engels": "Ley by berth", "duits": "Der Wartehafen"},
    {"x": "510", "y": "300", "string": "autosteiger", "engels": "Car jetty", "duits": "Der Autosteiger"},
    {"x": "581", "y": "350", "string": "Zwaaikom", "engels": "Turning basin", "duits": "Der Wendeplatz"},
    {"x": "505", "y": "652", "string": "Scheidingsboei", "engels": "Separation buoy", "duits": "Die Trennungsboje"},
    {"x": "705", "y": "550", "string": "radartoren", "engels": "radartower", "duits": "Der Radartum"},
    {"x": "931", "y": "365", "string": "Kilometerraai", "engels": "Kilometer marker", "duits": "Der Stromkilometer"},
    {"x": "887", "y": "312", "string": "schip", "engels": "Vessel", "duits": "Das Schiff"},
    {"x": "960", "y": "172", "string": "tunnel", "engels": "Tunnel", "duits": "Der Tunnel"}

From a previous page, I get which language(taal) I need ('engels' or 'duits').

// Get taal van de vorige pagina en zet deze in taal
this.taal = navParams.get('taal');

So here is what I'm currently trying. So here do I have a for loop on the rect for clickable rectangles to play 'audio'. In the click function, am I trying to get the right item language.

<svg viewBox="0 0 1280 720" *ngIf="id === 'SamenwerkenOpDeCorridor'">
  <image width="1280" height="720" xlink:href="assets/imgs/maps/SamenwerkenOpDeCorridor/opdracht1.svg">

  <rect *ngFor="let item of coordinaten" [attr.x]="item.x" [attr.y]="item.y" width="200" height="45" fill="#fff" opacity="0" (click)="clickOnArea(item.taal)"


So, I need to get the right language in the click function. So if I code it like "clickOnArea(item.engels)" it works, but I want it dynamic(?) somehow.

You can simply use the ternary operator.

(click)= "clickOnArea(taal === 'engels'? item.engels : item.duits)"

Ionic / angular ngFor and click function, You can simply use the ternary operator. (click)= "clickOnArea(taal === 'engels'? item.engels : item.duits)". Because this value does (should) not change when the reference changes, angular can still identify them and apply the optimization. Angular Implementation. To specify a trackBy function, we first need to create one in our component. The function gets the index of the element and the element itself. I then have to return the unique value of the element.

You can use the access the key on the object like this, future proof if you add more languages too

    let text = Item[this.taal];

       text = ""; //set default
    //use the value...

Just pass item to the function in the HTML.

ngClick inside of ngFor, Try this: <ion-list> <ion-item *ngFor="let device of devices"> <span (click)="​showDevice(device)"> {{ device }} </span> </ion-item> </ion-list>. Ionic 4 Angluar I'm submitting a [x ] bug report [ ] feature request Current behavior: I have an ion-list with sliding items in it and crate these with a for loop. You can click on the item itself and the router navigates to another

I think this is simplest. You can get the property via [].


Ionic 4 / Angular: ion-item-option needs to be clicked twice · Issue , Click once to fire event (in my case: Open a Popup). Related code: <ion-list *​ngFor="let item of items; let i = index" routerDirection="forward">  This article was originally written following the release of Ionic 2, and focused on the new concepts and syntax introduced in the new version of Angular, along with some comparisons to Ionic 1.x and AngularJS. Since then, Ionic 4 has been released which now allows us to use Ionic with any framework (not just Angular).

Template syntax, A template statement responds to an event raised by a binding target such as an <button (click)="onSave($event)">Save</button> <button *ngFor="let hero of  That’s because Ionic uses live reload, and whenever you make changes those are immediately reflected inside the preview! Angular Events. Ok it’s pretty static to just see the string, so we add a button and call a function to change the string to something else! We start with our class where we implement a function that changes our variable.

Updating and Deleting, Since this is a button, give the event handler the name deleteTask() . Copy the whole button tag, but replace the icon 🗑️ to a ✏️ and the click handler to We pass the index of the array from within the ngFor loop, so we know the exact To do that, we need to import the AlertController , a module found in ionic-angular . Following up on our series, we're going to dive into ng-click and ng-if next. Creating the project. We're going to continue with the project from my previous post. I recommend you check that one out first so you get the basic idea of how a template works and know the code that is already there. The Angular 1.x way

48 answers on StackOverflow to the most popular Angular questions, map is not a function in [null]; How to use jQuery with Angular? it isn't a known native property; Angular 2 dynamic tabs with user-click chosen components typings/angular2/angular2.d.ts" />import {Component,View,bootstrap,NgFor} from​  6. Run and Test the Ionic 4, Angular 8 Application. As usual, an Ionic 4 with Angular type application run in the browser using this command. ionic serve -l. And here's the complete Ionic 4 and Angular 8 application looks like. That it's, the Ionic 4 Radio Button and Checkbox inside Angular 8 FormArray. You can find the full source code from our GitHub.