ng2 Semantic UI sidebar from different component doesn't work

Question

I want to separate my layout using angular 4 to different component.

by the way I using https://edcarroll.github.io/ng2-semantic-ui/#/modules/sidebar

I separate to 3 components :

1. Topbar for top navigation
2. Sidebar for side navigation
3. base for base layout

topbar :

<div class="ui top yellow fixed inverted menu">
  <a class="item" (click)="sidebar.toggle()">
    <i class="sidebar icon"></i>
  </a>
  <div class="item">
    My Website
  </div>
  <a class="item" routerLink="/">Home</a>
  <a class="item" routerLink="/news">News</a>
  <div class="right menu">
    <div class="ui category search item">
      <div class="ui transparent icon input">
        <input class="prompt" type="text" placeholder="Search User...">
        <i class="search link icon"></i>
      </div>
      <div class="results"></div>
    </div>
    <div class="ui dropdown item" suiDropdown>
      Yoza Wiratama <i class="icon dropdown"></i>
      <div class="menu" suiDropdownMenu>
        <a class="item">Edit Profile</a>
        <a class="item" routerLink="/auth/login">Log Out</a>
      </div>
    </div>
  </div>
</div>

sidebar :

<sui-sidebar class="inverted vertical" #sidebar>
  <a class="item">1</a>
  <a class="item">2</a>
</sui-sidebar>

base :

<app-topbar></app-topbar>
<sui-sidebar-container class="ui bottom attached segment">
  <app-sidebar></app-sidebar>
  <sui-sidebar-sibling [isDimmedWhenVisible]="true">
    <div class="ui container" style="margin-top: 50px;">
      <router-outlet></router-outlet>
    </div>

    <div class="ui basic segment">
      <h3 class="ui header">Content</h3>
      <p>Example content beside the sidebar</p>
      <button class="ui button" (click)="sidebar.open()">Open Sidebar</button>
    </div>
  </sui-sidebar-sibling>
</sui-sidebar-container>

because of I using it with different component the sidebar toggle not work

please help me how to make this work

I wish I separate it with different components

thanks