File

src/app/shared/_directives/menu-toggle.directive.ts

Description

Toggle availability of sidebar on menu toggle click.

Metadata

Selector [appMenuToggle]

Index

Methods

Constructor

constructor(elementRef: ElementRef, renderer: Renderer2)

Handle click events on the html element.

Parameters :
Name Type Optional Description
elementRef ElementRef No
  • A wrapper around a native element inside of a View.
renderer Renderer2 No
  • Extend this base class to implement custom rendering.

Methods

onMenuToggle
onMenuToggle()

Toggle the availability of the sidebar.

Returns : void
import { Directive, ElementRef, Renderer2 } from '@angular/core';

/** Toggle availability of sidebar on menu toggle click. */
@Directive({
  selector: '[appMenuToggle]',
})
export class MenuToggleDirective {
  /**
   * Handle click events on the html element.
   *
   * @param elementRef - A wrapper around a native element inside of a View.
   * @param renderer - Extend this base class to implement custom rendering.
   */
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
      this.onMenuToggle();
    });
  }

  /** Toggle the availability of the sidebar. */
  onMenuToggle(): void {
    const sidebar: HTMLElement = document.getElementById('sidebar');
    sidebar?.classList.toggle('active');
    const content: HTMLElement = document.getElementById('content');
    content?.classList.toggle('active');
    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
    sidebarCollapse?.classList.toggle('active');
  }
}

result-matching ""

    No results matching ""