How to make the active class work in Angular?

Question

I'm trying to make a modal change z-index from -1 to 0 once I click "STOP" (the function is stopTimer()) by adding the "active" class but I don't seem to be finding a solution. I'm still getting confused by the Angular logic and I'd like to implement it fully instead of using JS logic, here's what I've written so far:

HTML:

<div class="modalbox">
  <div class="modal">
    <p>What did you do?</p>
    <input type="text" />
    <button>OK</button>
  </div>
</div>
<div class="box">
  <div class="containerUp">
    <button id="start" (click)="startTimer()">START</button>
    <button id="pause" (click)="pauseTimer()">PAUSE</button>
    <button id="stop" (click)="stopTimer()">STOP</button>
  </div>
  <div class="containerDown">
    <p>{{ display }}</p>
  </div>
</div>

CSS:

.modalbox {
  border: solid yellow;
  position: absolute;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: -1;
}

.active {
  z-index: 0;
}

.modal {
  border: solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 20px;
  background-color: yellow;
}

.modal p {
  font-size: 40px;
  margin-bottom: 10px;
  font-weight: bold;
}

.modal input {
  font-size: 25px;
}

.modal button {
  margin-top: 20px;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
}

.box {
  border-right: solid black;
  width: 50%;
  height: 100vh;
}

.containerUp {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border: solid red;
  height: 50vh;
}
.containerDown {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: right;
  border: solid blue;
  height: 50vh;
  font-size: 100px;
  margin: 0;
  padding: 0;
}

#start {
  color: white;
  padding: 50px;
  background-color: limegreen;
}
#pause {
  color: white;
  padding: 50px;
  background-color: orange;
}
#stop {
  color: white;

  padding: 50px;
  background-color: red;
}
button {
  font-size: 20px;
}

TS:

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

@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.css'],
})
export class TimerComponent implements OnInit {
  ngOnInit() {}
  time: number = 0;
  display: string | undefined;
  interval: any;
  modal = document.querySelector('.modalbox');

  startTimer() {
    console.log('go');
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display = this.transform(this.time);
    }, 1000);
  }
  transform(value: number): string {
    var sec_num = value;
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - hours * 3600) / 60);
    var seconds = sec_num - hours * 3600 - minutes * 60;
    return hours + ':' + minutes + ':' + seconds;
  }
  pauseTimer() {
    clearInterval(this.interval);
  }
  stopTimer() {
    this.modal?.classList.add('active');
    console.log('show');
  }
}

Answer 1

This will (probably) not work, due to the fact that you can't use the query-selector like that in Angular. There are two options:

• Using ViewChild https://angular.io/api/core/ViewChild
• Using the HTML class-property with Angular variable-binding https://angular.io/guide/attribute-binding#binding-to-the-class-attribute

HTML:

<div class="modalbox" [class.active]="modalboxActive">
  <div class="modal">
    <p>What did you do?</p>
    <input type="text" />
    <button>OK</button>
  </div>
</div>
<div class="box">
  <div class="containerUp">
    <button id="start" (click)="startTimer()">START</button>
    <button id="pause" (click)="pauseTimer()">PAUSE</button>
    <button id="stop" (click)="stopTimer()">STOP</button>
  </div>
  <div class="containerDown">
    <p>{{ display }}</p>
  </div>
</div>

TS:

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

@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.css'],
})
export class TimerComponent implements OnInit {
  ngOnInit() {}
  time: number = 0;
  display: string | undefined;
  interval: any;
  modalboxActive = false;

  // [...]

  stopTimer() {
    this.modalboxActive = true;
    console.log('show');
  }
}

[class.active]="modalboxActive" sets the active-class to the element, whenever the variable modalboxActive is true