Ionic 4 basic ngClass not working as expected

Question

Might be a beginners question but I'm really stuck here. Just trying to toggle the class of an element I added to my HTML like this:

<ion-card [ngClass]="{
   'inactive': step2Inactive,
   'button-card': true
}">

It should always have the button-card class and a toggleable inactive class.

In my TS file in initialize the param at the top of the class like this above the constructor:

protected step2Inactive: boolean = true;

Then at runtime I try to change it like this, but nothing happens:

this.step2Inactive = false;

The last part is wrapped in some functions and Timeouts, could I be losing the focus of "this"? Sorry this might be a very basic thing to ask but I couldn't find any solution to this :/

I am using Ionic 4 and Angular 8.1.2

Full Class:

    import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    import { HTTP } from '@ionic-native/http/ngx';
    import { NFC } from '@ionic-native/nfc/ngx';
    import { Vibration } from '@ionic-native/vibration/ngx';
    import { Platform, AlertController, IonRadioGroup, NavController, ToastController, IonCard } from '@ionic/angular';

    @Component({
        selector: 'app-repair',
        templateUrl: './repair.page.html',
        styleUrls: ['./repair.page.scss'],
    })
    export class RepairPage implements OnInit {

        protected stepsHidden: boolean = false;
        protected step2Inactive: boolean = true;
        protected step3Inactive: boolean = true;
        protected spinnerHidden: boolean = true;
        protected resultContainerHidden: boolean = true;

        constructor(
            private http: HTTP,
            private platform: Platform,
            private nfc: NFC,
            private vibration: Vibration,
            private alertController: AlertController,
            private navCtrl: NavController,
            private tstCtrl: ToastController,
        ) {}

        ngOnInit() {
        }

        ionViewDidEnter() {
            this.slides.lockSwipeToNext(true);
            this.slideParams[0] = 'rfid';
            this.slideParams[1] = 'guarantee';
            this.startRFID();
        }
        startRFID() {
            let listener = this.nfc.addNdefListener(() => {
                console.log('connected ndef listener')
            }, (err) => {
                console.log('error attaching ndef listener', err);
            }).subscribe((event) => {
                this.spinnerHidden = false;
                this.resultContainerHidden = true;
                setTimeout(() => {
                    this.step2Inactive = false;
                }, 1000);
                setTimeout(() => {              
                    this.step3Inactive = false;
                }, 2000);
                setTimeout(() => {
                    this.spinnerHidden = true;
                    this.stepsHidden = true;
                    this.resultContainerHidden = true;
                }, 3000);
            })
        }
    }

Full HTML File:

<ion-header>
</ion-header>
<ion-content>
    <ion-slides #slides [options]="slideOpts">
        <ion-slide class="slide-2">
            <ion-row>
                <ion-col size="12">
                    <h3 *ngIf="this.slideParams[1] == 'guarantee'">Garantie</h3>
                    <h3 *ngIf="this.slideParams[1] == 'costs'">Kostenpflichtig</h3>
                    <h3 *ngIf="this.slideParams[0] == 'rfid'">RFID Scan</h3>
                    <h3 *ngIf="this.slideParams[0] == 'qr'">QR Code Scan</h3>
                </ion-col>
            </ion-row>
            <div *ngIf="this.slideParams[0] == 'rfid'" [ngClass]="{'hidden': this.stepsHidden}">
                <ion-card class="button-card">
                    <ion-row>
                        <ion-col size="1">
                            <h3>1</h3>
                        </ion-col>
                        <ion-col class="ion-align-self-center" size="10">
                            <ion-text color="#606368">RFID zum scannen berühren</ion-text>
                        </ion-col>
                    </ion-row>
                </ion-card>
                <ion-card [ngClass]="{
                    'inactive': step2Inactive,
                    'button-card': true
                }">
                    <ion-row>
                        <ion-col size="1">
                            <h3>2</h3>
                        </ion-col>
                        <ion-col class="ion-align-self-center" size="10">
                            <ion-text color="#606368">Artikelnummer erkannt</ion-text>
                        </ion-col>
                    </ion-row>
                </ion-card>
                <ion-card [ngClass]="{
                    'inactive': this.step3Inactive,
                    'button-card': true
                }">
                    <ion-row>
                        <ion-col size="1">
                            <h3>3</h3>
                        </ion-col>
                        <ion-col class="ion-align-self-center" size="10">
                            <ion-text color="#606368">Daten werden geladen</ion-text>
                        </ion-col>
                    </ion-row>
                </ion-card>
            </div>
            <ion-row #spinner [ngClass]="{
                'hidden': spinnerHidden
            }" *ngIf="this.slideParams[0] == 'rfid'">
                <ion-col>
                    <ion-spinner color="danger" class="ion-align-self-center"></ion-spinner>
                </ion-col>
            </ion-row>
            <ion-card #result_container [ngClass]="{
                'hidden': resultContainerHidden,
                'ion-padding-horizontal': true
            }" (click)="openCard()">
            </ion-card>
        </ion-slide>
    </ion-slides>
</ion-content>
<ion-footer>
    <footer-nav-bar></footer-nav-bar>
</ion-footer>

Answer 1

Posting a solution if anyone ever stumbles across this: Basically I was trying to change the variable outside of the "angular zone" after the subscribe. Thus the change did not affect the DOM.

Full explanation and code can be found here: Angular 6 View is not updated after changing a variable within subscribe