Angular ngClass not working when using enum values

Question

I am using Angular 7.

I got this HTML:

<section class="carddiv">
    <section class="gameMessages">
       <p [ngClass] ="{'messageMiddleOfGameNoPairs' : gameModeVar === GameMode.NONE_SELECTED || gameModeVar === GameMode.ONE_SELECTED,
                    'messageSuccess' : gameModeVar === GameMode.TWO_SELECTED_SUCCESS || gameModeVar === GameMode.GAME_OVER,
                    'messageFailure' : gameModeVar === GameMode.TWO_SELECTED_FAILURE}"> {{currentMoveMessage}} </p>
    </section>
....
</section>

Inside the component's class:

enum GameMode
{
    NONE_SELECTED = 0,
    ONE_SELECTED = 1,
    TWO_SELECTED_SUCCESS = 2,
    TWO_SELECTED_FAILURE = 3,
    GAME_OVER = 4
};

@Component({
  selector: 'app-cardcomponent',
  templateUrl: './cardcomponent.component.html',
  styleUrls: ['./cardcomponent.component.css'],
})

export class CardcomponentComponent implements OnInit 
{
  currentMoveMessage: string;
  gameModeVar : GameMode;

  constructor(public cardService: CardService) 
  { 
    this.currentMoveMessage = "message";
    this.gameModeVar = GameMode.NONE_SELECTED;
...
}

When I load the page, nothing is rendered because of the ngClass. If I use the numeric values of the enum, meaning in the HTML I'm changing the comparison of gameModeVar to gameModeVar === 1 instead of gameModeVar === GameMode.ONE_SELECTED (but for all values, not just 1) , it does work.

1) Is the way I'm declaring the enum inside the same file of the class above the @Component (it couldn't be declared after it without compilation error), the correct way to do it, as it's supposed to be private to this component?

2) What's the issue with the ngClass ?

@Buczkowski why did this line actually solve issue number 2? What does it do? — CodeMonkey
– CodeMonkey, Commented May 7, 2019 at 7:21
@YonatanNir I believe it's about context of component since that class is connected with template. — Buczkowski
– Buczkowski, Commented May 7, 2019 at 7:25
@Buczkowski if you can answer both 1 and 2 of my questions (both needed) in an answer, I'll accept it as the correct answer — CodeMonkey
– CodeMonkey, Commented May 7, 2019 at 7:31

CodeMonkey · Accepted Answer · 2019-05-07 07:54:24Z

0

1) enum can't be really private but I think what you have is fine since you are not exporting it and it is only accessible through instance of that component. One other idea that comes to my mind could be simple object like this enum, public one or maybe private with getter (get) to access it.

  GameMode = {
    NONE_SELECTED: 0,
    ONE_SELECTED: 1,
    TWO_SELECTED_SUCCESS: 2,
    TWO_SELECTED_FAILURE: 3,
    GAME_OVER: 4
  };

2) Add this line in your class: GameMode = GameMode;. As I wrote in the comments - "I believe it's about context of component since that class is connected with template". It's not only case for enum but whatever you declare outside component class, like const someNumber = 35; it won't be accessible in template by {{someNumber}}. When I faced this problem I found out that this is about context but if there is different reason or something more please do correct me.

edited May 7, 2019 at 7:54

CodeMonkey

12.6k38 gold badges130 silver badges252 bronze badges

answered May 7, 2019 at 7:49

Buczkowski

2,41614 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ngClass not working when using enum values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related