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

ngClass always showing the class regardless of boolean in Angular 5

user1654 Published in June 25, 2018, 6:57 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;
        @Input() readOnly: boolean;
        @Output() onRating = new EventEmitter<Number>();

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

        constructor() {}

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

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

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


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>

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.336537 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO