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