title: Angular 2 open menu on click
body: <p><strong>header.component.html</strong> have a button, when you click, menu mast show on in <strong>users.component.html</strong>. On click add class to button. How can I add class to menu block, when clicking on button in header (without jQuery)?</p>
  
  <p><strong>header.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {Router} from "@angular/router";
  import {GlobalService} from "../../global.service";
  
  @Component({
    selector: 'header',
    providers: [GlobalService],
    templateUrl: 'app/_components/header/header.component.html'
  })
  
  export class HeaderComponent{
  
    public activeMobileMenuAdmin = false;
    public activeClass = false;
  
    constructor(public router: Router, public globalService: GlobalService){
  
      router.events.subscribe((val) =&gt; {
  
        if (val.url === '/login' || val.url === '/users') {
          this.adminPanelView = false;
        } else {
          this.adminPanelView = true;
        }
  
        if (val.url === '/users'){
          this.adminMenuView = true;
          this.detectDeviceWidth();
        } else {
          this.adminMenuView = false;
        }
  
      });
  
      this.activeClass = globalService.activeClass;
  
    }
  
    admMenuShow(){
      this.activeClass = !this.activeClass;
    }
  
    ngOnInit() {
      this.detectDeviceWidth();
    }
  
    detectDeviceWidth() {
      if (window.innerWidth &lt; 1024) {
        this.activeMobileMenuAdmin = true;
      } else {
        this.activeMobileMenuAdmin = false;
      }
    }
  
  }
  </code></pre>
  
  <p><strong>header.component.html</strong></p>
  
  <pre><code>&lt;div class="menu-icon show-on-sm" [ngClass]="{'active': activeClass}" (click)="admMenuShow();" *ngIf="adminMenuView"&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;span&gt;&lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>users.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {GlobalService} from "../../global.service";
  
  @Component({
    selector: 'admin',
    providers: [GlobalService],
    templateUrl: 'app/admin/users/users.component.html'
  })
  
  export class AdminUsersComponent {
    private activeClass = true;
    constructor(public globalService: GlobalService){
      this.activeClass = globalService.activeClass;
    }
    admMenuShow(){
      this.activeClass = !this.activeClass;
    }
  }
  </code></pre>
  
  <p><strong>users.component.html</strong></p>
  
  <pre><code>&lt;div class="menu" id="admin-menu" [ngClass]="{'active': activeClass}"&gt;
  &lt;div class="contflex"&gt;
    &lt;div class="h1"&gt;Test&lt;/div&gt;
    &lt;ul&gt;
      &lt;li class="active"&gt;List 1&lt;/li&gt;
      &lt;li&gt;List 2&lt;/li&gt;
      &lt;li&gt;List 3&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>global.service.ts</strong></p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {Router} from '@angular/router';
  
  @Injectable()
  export class GlobalService {
    public user: Object = {};
    public hideMenu: boolean = true;
    public activeClass: boolean = false;
  
    constructor(public _router: Router) {}
  
    admMenuShow(){
      return this.activeClass = !this.activeClass;
    }
  
    onAuthError() {
      console.log('Works!');
    }
  }
  </code></pre>
  
  <p>Page structure:</p>
  
  <pre><code>&lt;header&gt;
      ...
      &lt;div class="menu-icon show-on-sm" [ngClass]="{'active': activeClass}" (click)="admMenuShow();" *ngIf="adminMenuView"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
      &lt;/div&gt;
      ...
  &lt;/header&gt;
  &lt;main&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;admin&gt;
          ...
          &lt;div class="menu" id="admin-menu" [ngClass]="{'active': activeClass}"&gt;
              &lt;div class="contflex"&gt;
                &lt;div class="h1"&gt;Menu&lt;/div&gt;
                &lt;ul&gt;
                  &lt;li class="active"&gt;List 1&lt;/li&gt;
                  &lt;li&gt;List 2&lt;/li&gt;
                  &lt;li&gt;List 3&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          ...
      &lt;/admin&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>This is <a href="https://plnkr.co/edit/z74Y7H" rel="nofollow noreferrer">plunker project</a></p>
  
  <p>This is <a href="https://run.plnkr.co/TYA7ZgvYFwkBfjbl/" rel="nofollow noreferrer">plunker result in full view</a></p>