ngClass doesn't refresh css class

Question

I have great fight with angular 4. I wan`t to make simple star rating component. My template looks like this :

<div class="card rating">
<div class="card-section">
    <p class="ratings-card-header">{{name}}</p>
    <div class="grid-x grid-margin-x">
        <div class="rating-block cell small-12 medium-6 large-3"
             *ngFor="let ratingItem of values; let ratingItemIndex = index">
            <p class="ratings-type">{{ ratingItem.label }}</p>
            <div class="rating-block-rating">
                <a *ngFor="let a of getFakeArrayIteration(); let index = index" [ngClass]="time"
                   (click)="changeValue(ratingItem, index + 1)" >
                    <i [ngClass]="isStarSelected(index, ratingItem)">
                    </i>
                </a>
            </div>
        </div>
    </div>
</div>

And my controller class look like this:

import {Component, Input, OnInit} from '@angular/core';

import 'foundation-sites';
import {LabelledValue} from './star-rating-vaules';


@Component({
  selector: 'star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.scss']
})
export class StarRatingComponent implements OnInit {
@Input() public name: string;
@Input() public maxValue: number;
@Input() public values: LabelledValue[];

private time: Date;

constructor() {
}

ngOnInit() {
    console.log(this.values);
}

changeValue(item: LabelledValue, newValue: number) {
    item.value = newValue;
    this.time = new Date();
}

isStarSelected(index: number, item: LabelledValue): string {
    if (index < item.value) {
        return 'fas fa-2x fa-minus-square';
    } else {
        return 'far fa-2x  fa-star';
    }
}

getFakeArrayIteration(): any[] {
    return new Array(this.maxValue);
}
}



export class LabelledValue {
  public key: string;
  public label: string;
  public value: number;
}

Works on beginning. Set proper amount of stars. But if value changes, you cannot set less stars than initial value. I have no clue what`s wrong

I can't reproduce the issue, it seems to be working? Here is a StackBlitz https://stackblitz.com/edit/angular-exfhfb?file=app%2Fhello.component.ts — user184994, Apr 22 '18 at 16:36
It`s weird. because I tested it on 2 different browsers. Your StackBlitz works for me also. — Paweł Domański, Apr 22 '18 at 16:50
It must be caused by something outside of the code you've posted I guess. If you can create a StackBlitz that reproduces the error it may be easier to debug it — user184994, Apr 22 '18 at 16:52
I have no idea what can cause this :( I`m stuck on this since 2 days :/ — Paweł Domański, Apr 22 '18 at 16:55
If you add `console.log('Test')` into your `changeValue` function, is it being printed when you set less stars? — user184994, Apr 22 '18 at 16:57
It is really weird, but yes. It prints on console. But I you set for example init value on 3, then click 5 - works fine. But if you click next 1 - it will return to 3 stars. It cannot reduce amount below initial state :( — Paweł Domański, Apr 22 '18 at 17:11
You shouldn't directly use a method like that, as this polls change detection more often than needed and/or produces errors like this. Instead, create an array of strings, and change the value of the string. General idea is that you should manual manage each of your ngclass for best results. Will also ensure no errors in AOT compilation as well. Referring to ngclass=isStarSelected bit. Manage state in your component ts, not your html template — Z. Bagley, Apr 22 '18 at 17:14
Z. Bagley: Do you mean that LabelledValue class should contain array of stars with connected css classes as strings? And yes, I noticed a lot of refreshing with ngClass use. — Paweł Domański, Apr 22 '18 at 17:29

score 0 · Answer 1 · answered Apr 23 '18 at 14:33

0

Problem is caused because on first adding icon it is translated somehow to svg. After changes of state it is not a problem, but on beginning is unfortunately blocker of css change. Also I created new question: Prevent svg translation of fontawesome

answered Apr 23 '18 at 14:33

Paweł Domański

534
2
5
19

ngClass doesn't refresh css class

1 Answers1