*ngIf hide some content on mobile screen, Angular 4

Question

I have:

showHide: false;  <div *ngIf="showHide">   Content </div>  <button (click)="showHide = !showMap">   Button visited only max-width: 768px </button> 

On MAX-width: 768px, I have a button. On MIN-width: 768px the button is hidden. When I click on the button - it shows a DIV. It works fine.

BUT

How do I make *ngIf work only when MAX-width: 768px?

max-height: 768px

• button is display: block
• DIV is display: none (but when I click on the button = display:
  block)

min-height: 768px:

• button is display: none
• DIV is display: block

At the moment when I resize from example 500px to 1000px: It depends on button I pressed

Answer 1

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>