*ngIf hide some content on mobile screen, Angular

Question

I have:

showHide: false;

<div *ngIf="showHide">
  Content
</div>

<button (click)="showHide = !showMap">
  Button visited only max-width: 768px
</button>

In MAX-width: 768px, I have a button. On MIN-width: 768px button is hide. When I click on the button - it show a DIV. It work fine.

BUT

How to 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>