Angular directive for showing or hiding elements based on screen width

<!DOCTYPE html>

<html>
  <head>
    <script src="./lib/main.ts"></script>
  </head>

  <body>
    <my-app>
      loading...
    </my-app>
  </body>
</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResizeDirective } from './resize.directive';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h1>Hi {{ name }}</h1>
      <p>
        Increase or decrease the output width to see how the directive show or hides the content
      </p>
      <div class="screen-msg">
        <div *onlyForScreen="'desktop'">shown on big screens</div>
        <div *onlyForScreen="'tablet'">shown on tablet screens</div>
        <div *onlyForScreen="'mobile'">shown on small screens</div>
      </div>
    </div>
  `,
  styles: ['.screen-msg { font-weight: bold; color: green; font-size: 20px; }']
})
export class App {
  name: string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App, ResizeDirective],
  bootstrap: [App],
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
  font-family: sans-serif;
}

import {Directive, Input, OnInit, Renderer2, TemplateRef, ViewContainerRef, OnDestroy} from '@angular/core';

@Directive({
    selector: '[onlyForScreen]'
})
export class ResizeDirective implements OnInit, OnDestroy {

    config = new IConfigElement();

    // listenFunc will hold the function returned by "renderer.listen"
    listenFunc: Function;

    @Input('onlyForScreen') configWidth: string;

    constructor(private r: Renderer2,
                private templateRef: TemplateRef<any>,
                private viewContainer: ViewContainerRef) {
    }

    ngOnInit() {
        this.displayElement(window.innerWidth);
        this.r.listen('window', 'resize', (event) => {
            this.displayElement(event.target.visualViewport.width);
        });
    }

    displayElement(visualViewportWidth) {
        if(this.isValidSize(visualViewportWidth)) {
            if(!this.viewContainer.get(0)) {
                this.viewContainer.createEmbeddedView(this.templateRef);
            }
        } else {
            this.viewContainer.clear();
        }
    }

    isValidSize(viewportWidth) {
        switch(this.config[this.configWidth]) {
            case this.config.mobile:
              return viewportWidth < this.config.mobile;
              break;
            case this.config.tablet:
                return this.config.mobile <= viewportWidth && viewportWidth < this.config.tablet;
              break;
            case this.config.desktop:
                return this.config.tablet <= viewportWidth;
              break;
            default:
              return false
          }
    }

    ngOnDestroy() {
        // Removes "listen" listener
        this.listenFunc();
    }

}

export class IConfigElement {
    mobile: number;
    tablet: number;
    desktop: number;

    constructor() {
        this.desktop = 900;
        this.mobile = 300;
        this.tablet = 600;
    }
}

{
  "name": "@plnkr/starter-angular",
  "version": "1.0.3",
  "description": "Angular starter template",
  "dependencies": {
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "core-js": "2.6.11",
    "rxjs": "6.5.4",
    "zone.js": "0.10.2"
  },
  "main": "./lib/main.ts",
  "plnkr": {
    "runtime": "system",
    "useHotReload": true
  }
}

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true 
  }
}