*ngIf hide some content on mobile screen, Angular 4

You can use window.screen.width. Example:

ngOnInit() {
  if (window.screen.width === 360) { // 768px portrait
    this.mobile = true;
  }
}

Html:

<button *ngIf="mobile" (click)="showHide = !showMap"></button>

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()))
}

Tags:

Angular