service and directive to detect screen size changes

device-screen-size.directive.ts

import { Directive, HostListener } from '@angular/core';
import { DevicesService } from './devices.service';

@Directive({
  selector: '[cesDeviceScreenSize]'
})
export class DeviceScreenSizeDirective {
  constructor(
    private devices: DevicesService
  ) { }

  @HostListener('window:load', ['$event']) onLoad(event) {
    this.sendSize(event.currentTarget.innerWidth);
  }

  @HostListener('window:resize', ['$event']) onResize(event) {
      this.sendSize(event.currentTarget.innerWidth);
  }

  sendSize(width: number) {
    this.devices.setSize(width);
  }
}

devices.service.ts

import { Injectable, Input } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { ScreenSize, DetectType } from './devices';

@Injectable({
  providedIn: 'root'
})
export class DevicesService {
  screenSize: Subject<any> = new Subject();
  @Input() detectSize: DetectType;

  constructor() { }

  setSize(width: number): Observable<any> {
    if (this.detectSize === 'number') {
      this.screenSize.next(width);
    }

    else {
      if (width < ScreenSize.medium) {
        this.screenSize.next('small');
      }

      else if (width > ScreenSize.medium) {
        this.screenSize.next('medium');
      }

      if (width > ScreenSize.large) {
        this.screenSize.next('large');
      }
    }


    return this.screenSize;
  }
}

menu-toggle.component.html

<div cesDeviceScreenSize>
  <div *ngIf="showMenuContent" [ngClass]="{'slide-down': this.allowToggle}" class="menu-container">
    <ces-button title="close {{ menuTitle }}" class="button-icon-only menu-button-close" (click)="closeMenu()">
      <ces-svg-x-circle class="menu-icon-close"></ces-svg-x-circle>
    </ces-button>
    <div class="menu-content" (click)="toggleNav()">
      <ng-content></ng-content>
    </div>
  </div>
    <ces-button *ngIf="showMenuButton" title="open {{ menuTitle }}" class="button-icon-only menu-button-open fade-in" (click)="openMenu()">
      <ces-svg-ellipsis-vertical class="menu-icon-open"></ces-svg-ellipsis-vertical>
    </ces-button>
</div>

menu-toggle.component.ts

import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
import { DevicesService } from 'projects/devices/src/public-api';
import { distinctUntilChanged } from 'rxjs/operators';
import { Subscription } from 'rxjs';

@Component({
  selector: 'ces-menu-toggle',
  templateUrl: './menu-toggle.component.html',
  styleUrls: ['./menu-toggle.component.scss']
})
export class MenuToggleComponent implements OnInit, OnDestroy {
  @Input() showMenuButton: boolean = false;
  @Input() showMenuContent: boolean = false;
  @Input() menuTitle: string = "menu";
  allowToggle: boolean;
  sub: Subscription;

  constructor(
    private devices: DevicesService
  ) { }

  ngOnInit() {
    this.devices.detectSize = "type";
    this.sub = this.devices.screenSize.pipe(distinctUntilChanged()).subscribe(size => {
      this.checkSize(size);
    })
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

  closeMenu() {
    this.showMenuButton = true;
    this.showMenuContent = false;
  }
  
  openMenu() {
    this.showMenuButton = false;
    this.showMenuContent = true;
  }

  checkSize(size: string) {
    if (size === 'medium') {
      this.allowToggle = false;
      this.openMenu();
    }

    else if (size === 'small') {
      this.allowToggle = true;
      this.closeMenu();
    }
  }

  toggleNav() {
    if (this.allowToggle) {
      this.showMenuButton = !this.showMenuButton;
      this.showMenuContent = !this.showMenuContent;
    }  
  }
}