*ngIf hide some content on mobile screen, Angular 4

Question

I have:

showHide: false;


  Content



  Button visit         


        

Answer 1

For future me or others if you need a solution that monitors the screen size and are using Observables/rxjs then this solution works:

ngOnInit(): void {
  // Checks if screen size is less than 1024 pixels
  const checkScreenSize = () => document.body.offsetWidth < 1024;

  // Create observable from window resize event throttled so only fires every 500ms
  const screenSizeChanged$ = Observable.fromEvent(window, 'resize').throttleTime(500).map(checkScreenSize);

  // Start off with the initial value use the isScreenSmall$ | async in the
  // view to get both the original value and the new value after resize.
  this.isScreenSmall$ = screenSizeChanged$.pipe(startWith(checkScreenSize()))
}