angularjs - Triggering global behavior for a "loading" component such as with Angular 1's $emit

Question

I'm making a loading overlay component in Angular 2, and I realized, I'm not sure how to trigger it. In Angular 1, I would emit something and listen in the loading spinner directive, to hide or show. In Angular 2, I suspect I need to be doing this via a service, but I can't figure out how the architecture would work. How would the service then communicate with the loading spinner component? I suspect this is a case for observables, but being new to this side of things, I can't figure out how to structure this. Any advice is appreciated.

Answer 1

Here's a slightly more detailed answer following RhoVisions' comment.

Typically, you would inject a service in both the spinner component and any component that requires to show/hide the spinner.

The service acts as some kind of "event bus" and can be implemented with a (Behavior)Subject, which is a special kind of observable that can both emit values (on the triggering component's side) and subscribe to emitted values (on the spinner component's side).

Here's a rough outline for the implementation:

The spinner service:

@Injectable()
export class SpinnerService {
  private spinnerEvents: BehaviorSubject<string> = new BehaviorSubject<string>('hide');
  show() {
    this.spinnerEvents.next('show');  // emit value
  }
  hide() {
    this.spinnerEvents.next('hide');  // emit value
  }
  get events() {
    // Expose the subject as an observable for subscribers.
    return this.spinnerEvents.asObservable();
  }
}

The spinner component:

@Component({
  template: `<div [hidden]="!showSpinner">SPINNER</div>`
})
export class SpinnerComponent {
  showSpinner: boolean;
  constructor(ss: SpinnerService) {
    // Set the `showSpinner` flag to true/false depending on event received.
    ss.events.subscribe(event => this.showSpinner = (event == 'show'));
  }
}

Some component using the spinner:

@Component({ ... })
export class SomeComponent {
  constructor(ss: SpinnerService) {
    // Manually trigger show/hide events.
    ss.show();
    // ...Some instructions...
    ss.hide();
  }
}