App component specific tablet CSS file in NativeScript

nativescript-apply-cssfile-at-runtime.ts

import { Component, OnInit } from "@angular/core";
import { DeviceType } from "ui/enums";
import { device } from "platform";
import { Page } from "ui/page";

@Component({
  moduleId: module.id,
  selector: "my-component",
  templateUrl: "my-component.html",
  styleUrls: ["my-component.css"]
})

export class MyComponent implements OnInit {
  constructor(private page: Page) {
  }

  ngOnInit(): void {
    if (device.deviceType === DeviceType.Tablet) {
      this.page.className = "tablet";
      this.page.addCssFile("~/pages/my-component/my-component.tablet.css");
    }
  }
}