### File

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

### Description

Toggle availability of sidebar on menu toggle click.

### Metadata

Selector | `[appMenuToggle]`

### Index

###### Methods
onMenuToggle

### Constructor

`constructor(elementRef: ElementRef, renderer: Renderer2)`
Defined in src/app/shared/_directives/menu-toggle.directive.ts:8
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()`
Defined in src/app/shared/_directives/menu-toggle.directive.ts:22
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 ""