title: Angular resize service
body: <p>I'm trying to create an observable that will emit a value of true or false if the window screen is less than 520px or not.
  So I have this code below:</p>
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class ResizeService {
    private mobileView$: BehaviorSubject&lt;boolean&gt; = new BehaviorSubject&lt;boolean&gt;(false);
    mobileViewObs$ = this.mobileView$.asObservable();
    isMobile = false;
    size!: {width: number, height: number};
    constructor() {
     }
  
    resizeEvent(){
       fromEvent(window, 'resize').pipe(throttleTime(500), debounceTime(500)).subscribe((resizeEvent: any) =&gt; {
        this.size = {
            width: +resizeEvent.currentTarget.innerWidth,
            height: +resizeEvent.currentTarget.innerHeight
        }; 
        
        this.isMobile = this.isMobileView(this.size);
  
        this.mobileView$.next(this.isMobile);
      });;
    }
  
    isMobileView(size: {width: number, height: number}){
      if(size.width &lt; PHONE_SIZE.width &amp;&amp; size.height &lt; PHONE_SIZE.height){
        return true;
      } else {
        return false;
      }
    }
  }
  </code></pre>
  <p>It is working fine, but the problem is I can't set the initial size of a page. I don't know how to send the size object from the component to the service. Here is my component.ts:</p>
  <pre><code>@Component({
    selector: 'app-books-list',
    templateUrl: './books-list.component.html',
    styleUrls: ['./books-list.component.scss'],
  })
  export class BooksListComponent implements OnInit {
    @Input() book!: BookModel;
  
    booksArray: BookModel[] = [];
    oneBook!: BookModel;
    isMobile: boolean = false;
    size!: {width: number, height: number};
  
    constructor(private service: BookService, private route: ActivatedRoute,
      private resizeService: ResizeService) {}
    
    ngOnInit(): void {
      this.size = {width: window.innerWidth, height: window.innerHeight};
      
      this.resizeService.resizeEvent();
      this.resizeService.mobileViewObs$.subscribe(data =&gt; {
        this.isMobile = data;
      })
  
      this.service.getBooks().subscribe((books) =&gt; {
        this.booksArray = books;
      });
    }
  </code></pre>
  <p>The problem is that the first time the page reload it will always diplay false because the observable is created only on resize event. Do you know how to implement this feature?</p>