CODEWITHSUNDEEP
angular
mcasensi
mcasensi

Reputation: 45

Trigger same function in different component

How can I trigger the same function for both?

enter image description here

and here is how the m_quick_sidebar_toggle is being called

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 {}

Upvotes: 0

Views: 547

Answers (2)

deepchudasama
deepchudasama

Reputation: 578

You can create one service and use DRY (Don't Repeat Yourself) principle to reduce your code logic as well as solve your issue.

You probably have multiple places across the application that will need to access components suppose side-bar component. Let’s see how we do it.

So, you will create one service which can toggle your sidebar (it's only for development purpose in production you probably have more components which can be toggled or not on circumstances created by user for now just assume that you have only one sidebar component and this sidebar component is going to toggle by two buttons.)

enter image description here

Now, your sidebar service will look like this:

@Injectable()
export class SideBarService {

  isOpen = false;

  @Output() change: EventEmitter<boolean> = new EventEmitter(); //this is a simple event which will return subscriber

  toggle() {
    this.isOpen = !this.isOpen;
    this.change.emit(this.isOpen);
  }

}

app.component.ts:

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {

  constructor(
    private sideBarService: SideBarService
  ) { }

  @HostListener('click')
  click() {
    this.sideBarService.toggle();
  }
}

side-bar-toggle.component.ts:

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {

  @HostBinding('class.is-open')
  isOpen = false;

  constructor(
    private sideBarService: SideBarService
  ) { }

  ngOnInit() {
    this.sideBarService.change.subscribe(isOpen => {
      this.isOpen = isOpen;
    });
  }
}

app.component.html:

<app-side-bar-toggle></app-side-bar-toggle>
<app-side-bar></app-side-bar>

Side bar services will have toggle method and change event so every component that will inject this service can be notified that panel was opened or can toggle it.

Learn more: https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

Upvotes: 0

Legolas
Legolas

Reputation: 773

You can use services in angular, code the required function in that service and use it anywhere in your entire program, simply through an instance of that service in your component. See here for documentation.

Upvotes: 2

Related Questions