javascript - Angular 6 [ngClass] not working with boolean in component.js - Stack Overflow

What I'm trying to do is hide text when ngState is true. When a certain element is clicked, that state is set to true. The [ngClass] should then add the hide class and hide the text. This first snippet is from the ponent.ts which outlines the boolean variable and the function which sets it to true.

export class MainMenuComponent implements OnInit {
  ngState = false;
    constructor() {

  }
  newGame(){
    this.ngState = this.ngState === true ? false : true;
    console.log(this.ngState);
  }
}

This next snippet is the ponent html

<canvas id='sparkCanvas'></canvas>
<div class="menuBox">
    <div class="title" [ngClass]="{'hide': ngState}">Dark Shards</div>
    <div class="optContainer">
        <ul>
            <li *ngFor="let opt of opts" class="{{opt.class}}" [ngClass]="{'hide': ngState}"  (click)="opt.f()">{{opt.n}}</li>
        </ul>
    </div>
</div>

and here is the hide class below

.hide{
  opacity: 0;
}

When I replace [ngClass]="{'hide': ngState}" with [ngClass]="{'hide': true}"

It will then work as intended. What am I not understanding here?

Here is a link to my code with a working example: .html

What I'm trying to do is hide text when ngState is true. When a certain element is clicked, that state is set to true. The [ngClass] should then add the hide class and hide the text. This first snippet is from the ponent.ts which outlines the boolean variable and the function which sets it to true.

export class MainMenuComponent implements OnInit {
  ngState = false;
    constructor() {

  }
  newGame(){
    this.ngState = this.ngState === true ? false : true;
    console.log(this.ngState);
  }
}

This next snippet is the ponent html

<canvas id='sparkCanvas'></canvas>
<div class="menuBox">
    <div class="title" [ngClass]="{'hide': ngState}">Dark Shards</div>
    <div class="optContainer">
        <ul>
            <li *ngFor="let opt of opts" class="{{opt.class}}" [ngClass]="{'hide': ngState}"  (click)="opt.f()">{{opt.n}}</li>
        </ul>
    </div>
</div>

and here is the hide class below

.hide{
  opacity: 0;
}

When I replace [ngClass]="{'hide': ngState}" with [ngClass]="{'hide': true}"

It will then work as intended. What am I not understanding here?

Here is a link to my code with a working example: https://stackblitz./edit/angular-fg48ro?file=src%2Findex.html

• javascript
• angular
• ng-class

Share Improve this question Follow edited Jun 27, 2018 at 3:22 user3044394 asked Jun 27, 2018 at 2:24 user3044394user3044394 13533 silver badges1515 bronze badges 9

• everything seems fine. Did the newGame func get called to change the flag to true? can you provide code snippet with plunker or something? – Wei-jye Commented Jun 27, 2018 at 2:30
• I can definitely try, but on plunker it looks like it only supports older versions of angular. I created my project using 'ng new my-app' in the mand console, so I'm not sure how I can recreate that within plunker or code pen. It may take me some time to figure that out since it doesn't seem to support it up front from what I am reading – user3044394 Commented Jun 27, 2018 at 2:36
• You can try with stackblitz. – Martin Parenteau Commented Jun 27, 2018 at 2:39
• Yup. Try this stackblitz./edit/angular-rdh8eh – Wei-jye Commented Jun 27, 2018 at 2:39
• Did you save your stackblitz? – Martin Parenteau Commented Jun 27, 2018 at 2:58

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 4

Try without Quote

  <li *ngFor="let opt of opts" class="{{opt.class}}" [ngClass]="{hide: ngState}"  (click)="opt.f()">{{opt.n}}</li>

EDIT

When i see your code, the issue is not related to angular, but with javascript context, you need to specifiy the context of this like

' f: this.newGame.bind(this),'

DEMO