CODEWITHSUNDEEP
javascriptangular
Merijndk
Merijndk

Reputation: 1693

angular 2 how to refresh var for template

I have an var that I need to pass to the template of my website everytime it changes:

in my component I have this code

private selected = 1;

this.$select.change(function () {
  this.selected = jQuery( 'input[type=radio][name=fb]:checked' ).val();
  console.log(this.selected);
}

As soon as I change the choosen radio button the new value gets stored in the selected value and it all works.

Now I have the following code in my template

<li *ngFor="let optie of vraag.opties; let i = index" [ngClass]="{'selectedclass': (selected == i)}">

When I load my site the li where i = 1 gets the class and works. But when I change the radio button, the console logs the new value. but the frontend doesnt get updated.

What am I doing wrong?

Upvotes: 0

Views: 82

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657188

Instead of

this.$select.change(function () {

use

this.$select.change( () => {

then this. will still point to the current class.

I would rather use [(ngModel)]="..." on your radio input to set it to a specific value. Using jQuery this way is discourages in Angular2.

Upvotes: 2

Related Questions