title: Show different navbar items on collapse (ngx-bootstrap)
body: <p>With ngx-bootstrap, is it possible to show different navbar bootstrap items depending on whether the navbar is collapsed or not?</p>
  
  <p>I tried to do this by making a div for collapsed and !collapsed.  Unfortunately, both show when !collapsed.</p>
  
  <p>StackBlitz: <a href="https://stackblitz.com/edit/angular-startup-proj-ddztm4" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-startup-proj-ddztm4</a>  </p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-sm navbar-light bg-light"&gt;
    &lt;a class="navbar-brand"
       href="#"&gt;Navbar&lt;/a&gt;
    &lt;button class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target=".navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-label="Toggle navigation"
            [attr.aria-expanded]="!isCollapsed"
            (click)="isCollapsed = !isCollapsed"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;!-- show only when not collapsed --&gt;
    &lt;div class="collapse navbar-collapse navbarSupportedContent"
         [ngClass]="{'hide': isCollapsed}"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link"
             href="#"&gt;Link One - full screen&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link"
             href="#"&gt;Link Two - full screen&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;!-- show only when collapsed --&gt;
    &lt;div class="collapse navbar-collapse navbarSupportedContent"
    [ngClass]="{'show': !isCollapsed}"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link"
              href="#"&gt;Link Two - collapsed&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link text-success"
              href="#"&gt;Link Three - collapsed&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code> isCollapsed = true;
  </code></pre>