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;
  }
}