3

I have created a stackblitz example of my problem,

I want only 1 mode at a time to be visible either

  • Draw Mode
  • Zoom Mode
  • Click Mode

But I am unable to do comparison and zoom mode doesn't appear on clicking the button

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

export enum Mode {
  DRAW,
  ZOOM,
  CLICK
}

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>
  <h1>Draw Mode</h1>
  <h1 *ngIf = "mode === Mode.ZOOM">Zoom Mode</h1>
  <h1>Click Mode</h1>

  <button (click)="setZoomMode()"> Zoom Mode</button>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
  @Input() name: string;
  mode: Mode;


  ngOnInit() {
    this.mode = Mode.CLICK;
  }
  setZoomMode() {
    this.mode = Mode.ZOOM;
  }


}
dota2pro
  • 7,220
  • 7
  • 44
  • 79
  • 3
    possible duplicate: https://stackoverflow.com/q/50357288/2050306 – robert Jun 13 '19 at 21:17
  • Yeah, this is a simple ENUM comparison issue. It seems you should use strings when you're going to compare ENUM values. Otherwise each value is a number: https://www.typescriptlang.org/docs/handbook/enums.html – Ben Racicot Jun 13 '19 at 21:25
  • It may be because `Mode` is not part of the component. What if you try accessing the value of the enum via a component property, something like `get modeZoom(){return Mode.ZOOM;}` and use that in the comparison in your template? – dcg Jun 13 '19 at 21:27
  • Thanks, The duplicate answers my question – dota2pro Jun 13 '19 at 21:30

0 Answers0