title: Trigger same function in different component
body: <p>How can I trigger the same function for both?</p>
  
  <p><a href="https://i.stack.imgur.com/qqmta.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qqmta.png" alt="enter image description here"></a></p>
  
  <p>and here is how the <code>m_quick_sidebar_toggle</code> is being called</p>
  
  <pre><code>import { Directive, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
  import { $ } from 'protractor';
  
     @Directive({
         selector: '[mQuickSidebarOffcanvas]'
        })
     export class QuickSidebarOffcanvasDirective
      implements AfterViewInit, OnDestroy {
         constructor(private el: ElementRef) {}
  
  ngAfterViewInit(): void {
      const offcanvas = new mOffcanvas(this.el.nativeElement, {
          overlay: true,
          baseClass: 'm-quick-sidebar',
          closeBy: 'm_quick_sidebar_close',
          toggleBy: 'm_quick_sidebar_toggle'
      });
  }
  ngOnDestroy(): void {}
  </code></pre>