2n2n/header.component.html

## 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.

## 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];
  }

}