Home ngClass always showing the class regardless of boolean in Angular 5

# ngClass always showing the class regardless of boolean in Angular 5

user7772
1#
user7772 Published in September 20, 2018, 10:22 pm

I can't get ngClass working in my Angular 5 app, the class is always showing regardless of if the boolean variable that I am using to show it conditionally is true or false.

I have a component that shows rating stars:

    export class RatingStarComponent {
@Input() max: number;
@Input() initial: number;
@Output() onRating = new EventEmitter<Number>();

maxItem: any[];
ratedCount: number;
hideHover: boolean;

constructor() {}

ngOnInit() {
this.ratedCount = this.initial;

this.maxItem = [];
for (var i = 0; i < this.max; i++) {
this.maxItem.push(i + 1);
}

}
toggleRating(s: number) {
this.ratedCount = s;
this.onRating.emit(this.ratedCount);
}

}


This is my html

<div [ngClass]="{ 'hideme': this.hideHover }">
<span class="icon" *ngFor="let s of maxItem">
<i [ngClass]="s <= this.ratedCount ? 'filled' : ''" class="fa fa-star" aria-hidden="true" (click)="toggleRating(s)"></i>
</span>
</div>


If I add {{this.hideHover}} to this html then it is reflecting properly, showing true or false depending on how I call it. I call the component like so:

<rating-star max=5 readOnly="true" initial=4></rating-star>


However my hideme class is always being added to the component. What am I doing wrong.

• Use <rating-star max=5 [readOnly]="false" initial=4></rating-star> instead of <rating-star max=5 readOnly="false" initial=4></rating-star> – Harry Ninh Feb 27 at 4:23
• you don't have to use this.hideHover.. just hideHover is fine – VithuBati Feb 27 at 4:28
• I tried and it didn't work. But I don't think that's it anyway because note my sentence: If I add {{this.hideHover}} to this html then it is reflecting properly, showing true or false depending on how I call it. – Robbie Mills Feb 27 at 4:30