Using ngClass to dynamic style/css change in nativescript angular

home.component.html

<ActionBar title="Home" class="action-bar">
</ActionBar>

<ScrollView class="page">
<StackLayout class="home-panel">
<Button text="onActive" (tap)="onActiveButtonTap()"></Button>
<Button text="onDeAct" (tap)="onDeActButtonTap()"></Button>
<Label textWrap="true" [text]="check + 'Play with nativescript!' " class="normal" [ngClass]="{active : check, deactive : check == false}" class="h2 description-label"></Label>
</StackLayout>
</ScrollView>

home.component.ts

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

@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
check: boolean;
onActiveButtonTap(): void {
console.log("true Button was pressed");
this.check = true;
}
onDeActButtonTap(): void {
this.check = false;

console.log("false Button was pressed");
}

constructor() {
// this.check = null;
}

ngOnInit(): void {
}
}

home.component.css

.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label{
margin-bottom: 15;
}
.active{
color: green;
}
.deactive{
color: red;
}
ScrollView > StackLayout > Label.normal{
color: black;
}