MarJaysonSanAgustin · August 13, 2017 15:04
diff --git a/header.component.html b/header.component.html
 // since the <body> tag is inside the index.php and doesn't have any component.ts
  <a alphaToggleNav class="sidebar-toggle" data-toggle="offcanvas" role="button">
 // the alphaToggleNav directive will find the body tag, and will change the className depending on the state.
diff --git a/toggle-nav.directive.ts b/toggle-nav.directive.ts
 import { Directive, HostListener, Renderer2, ElementRef } from '@angular/core';

 @Directive({
  selector: '[alphaToggleNav]'
 })
 export class ToggleNavDirective {
  // reference for the class names, key is the state, while value will be the el.className value.
  private stateClassRef = {
    normal: "skin-blue sidebar-mini",
    collapsed: "skin-blue sidebar-mini sidebar-collapse"
  }
  private state = "normal"; // normal or collapsed

  constructor(private el: ElementRef,private rd: Renderer2) { }

  @HostListener('click') toggleState() {
    this.state = this.state === "normal" ? "collapsed": "normal";
    // do the toggling.
    this.el.nativeElement.closest('body').className = this.stateClassRef[this.state];
  }
  
 }