title: *ngIf hide some content on mobile screen, Angular 4
body: <p>I have:</p>
  <pre><code>showHide: false;
  
  &lt;div *ngIf=&quot;showHide&quot;&gt;
    Content
  &lt;/div&gt;
  
  &lt;button (click)=&quot;showHide = !showMap&quot;&gt;
    Button visited only max-width: 768px
  &lt;/button&gt;
  </code></pre>
  <p>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.</p>
  <p>BUT</p>
  <p>How do I make *ngIf work only when MAX-width: 768px?</p>
  <p>max-height: 768px</p>
  <ul>
  <li>button is display: block</li>
  <li>DIV is display: none (but when I click on the button = display:<br />
  block)</li>
  </ul>
  <p>min-height: 768px:</p>
  <ul>
  <li>button is display: none</li>
  <li>DIV is display: block</li>
  </ul>
  <p>At the moment when I resize from example 500px to 1000px:
  It depends on button I pressed</p>