Toggle SideBar Menu from other component in Angular 4 -

how can implement sidebar toggle menu in angular app. i'm confused on how call sidebar menu in other component. toggle button found on header component. it's purpose show sidebar menu when click toggle button on header component.

header.component.html

  <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">               <div class="brand-text"><span>mcdonalds</span></div></a></div> 

sidebar.component.html

<nav class="side">   <h1>click show me</h1>   </nav> 

core.component.html

<app-header></app-header> <app-sidebar></app-sidebar> 

you can use shared service open sidebar. create service vith eventemitter , emit event when want open sidebar. then, in sidebar component, subscribe eventemitter , open/close sidebar every time when event fired.

for example:

service

import { injectable, eventemitter } '@angular/core';  @injectable() export class coreservice {   public togglesidebar: eventemitter<any> = new eventemitter(); } 

header

public opensidebar() {   this.coreservice.togglesidebar.emit(); } 

sidebar

this.coreservice.togglesidebar.subscribe(() => {   //open sidebar setting classes, whatever });