title: Angular side bar using ng-sidebar as a component is not working
body: <p>I am building a toggle side bar using ng-sidebar which is here
  [https://www.npmjs.com/package/ng-sidebar][1]</p>
  <p>I builded this inside a component the reason why i am doing this is becose i want to show the toggle side bar only in four pages so i dont want to call the same on root app component.ts</p>
  <p>My code for logot.component.ts is like this</p>
  <pre><code>&lt;ng-sidebar-container&gt;
    &lt;!-- sidebar --&gt;
    &lt;ng-sidebar [opened] = &quot;opened&quot;&gt;
      &lt;button (click) = &quot;toggleSidebar()&quot;&gt;
        x
      &lt;/button&gt;
      &lt;ul class = &quot;menu&quot;&gt;
        &lt;li&gt;
          &lt;span (click)=&quot;logout()&quot;&gt;Logout&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/ng-sidebar&gt;
  
    &lt;div ng-sidebar-content&gt;
      To open the sidebar
      &lt;!-- Page Content --&gt;
      &lt;button (click) = &quot;toggleSidebar()&quot;&gt;
        Open sidebar
      &lt;/button&gt;
  
    &lt;/div&gt;
  &lt;/ng-sidebar-container&gt;
  </code></pre>
  <p>And the code for logout.component.ts goes here</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Router} from &quot;@angular/router&quot;;
  
  @Component({
    selector: 'app-logout',
    templateUrl: './logout.component.html',
    styleUrls: ['./logout.component.css']
  })
  export class LogoutComponent implements OnInit {
    opened = false;
  
    constructor(private router: Router) { }
  
    ngOnInit(): void {
    }
  
    logout(){
      console.log('Logout');
      this.router.navigate(['/login']);
    }
  
    toggleSidebar(){
      this.opened = !this.opened;
    }
  }
  </code></pre>
  <p>And i am calling this in home like this</p>
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-logout&gt;&lt;/app-logout&gt;
  
    {{ home|json }}
    
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  <p>But the content of the home|json comes after the entire content of app-logout. I have tried in at this way as well</p>
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-logout&gt;
  
    {{ home|json }}
    
  &lt;/app-logout&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  <p>But this time the home|json is not visible How can i fix this and where i am going wrong? Any idea is really appriciatable.
  [1]: <a href="https://www.npmjs.com/package/ng-sidebar" rel="nofollow noreferrer">https://www.npmjs.com/package/ng-sidebar</a></p>