0

I would like to have some rules or suggestions to be able to do this:

I have an alert on app level that I want to show when something is happening on one of my components (ex: Saving information has succeeded or failed).

Also, how can I send the different text I want to show? Is there any equivalent of @ViewChild?

Thanks for your help

David
  • 1,241
  • 20
  • 36
  • 1
    Inject a service into the child component. Pass the alert to the service in the clild component. Emit this alert in the service, using a subject. Also inject the service in the app component. Subscribe to the subject from the app component, and every time an alert is received, display it. https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service – JB Nizet Nov 22 '17 at 17:46
  • I've created an example of how I did it to keep it simple with a service and a component. https://github.com/angular-in-action/portfolio/tree/master/src/app/alert – Jeremy Wilken Nov 22 '17 at 18:07
  • Thanks Jeremy. Your example helped me a lot and thanks to JB to for the Angular doc! – David Nov 23 '17 at 02:06

1 Answers1

1

I would do it with Observable and Subject. Basically you need a service injected in the shared module of those component so they share state.

The app (root) component will have a subscription on the public observable of the service. And every component will set the state through that service by calling the .next() on the subject. The observable will return the value of the subject.

You can check the code here: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

The idea is quite similar.

DrNio
  • 1,936
  • 1
  • 19
  • 25
  • the way subscriptions are managed in that code is wayy off. giant memory leaks – bryan60 Nov 22 '17 at 18:06
  • `ngOnDestroy` you `.unsubscribe` ( or in another place in the code if that suits best ) - i forgot to mention that. It depends on the use case i guess. – DrNio Nov 22 '17 at 18:08
  • it's way more than that, there's a totally unneccesary resubscription in every function call. Also, unsubscribing does not depend on the use case, you do it always otherwise you're creating memory leaks, the only case it isn't needed is self terminating observables. – bryan60 Nov 22 '17 at 18:09
  • how can you notify from a componentA another componentB (that don't have parent-child relationship) ? can you share a snippet ? – DrNio Nov 22 '17 at 18:11
  • with a shared service patttern, that part isn't wrong, the implementation in that code is the issue, I wouldn't use it as an example, angular docs provide a proper one. – bryan60 Nov 22 '17 at 18:12
  • could you share one specific example please ? – DrNio Nov 22 '17 at 18:12
  • https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service – bryan60 Nov 22 '17 at 18:13
  • that works fine for parent-child relationship components - my question was for components "that don't have parent-child relationship" – DrNio Nov 22 '17 at 18:14
  • I think you should probably look at that link again and not only read the title. That code works for communication between any 2 arbitrary components so long as the service is provided correctly. – bryan60 Nov 22 '17 at 18:14
  • `ngOnDestroy() { // prevent memory leak when component destroyed this.subscription.unsubscribe(); }` the pattern i posted is exactly like that, basically the shared service has: ` // Observable string sources private missionAnnouncedSource = new Subject(); private missionConfirmedSource = new Subject(); // Observable string streams missionAnnounced$ = this.missionAnnouncedSource.asObservable(); missionConfirmed$ = this.missionConfirmedSource.asObservable();` – DrNio Nov 22 '17 at 18:19
  • actually i think i just saw the problem : you subscribe only to `this.menuService.getMenuState()` right ? and not in the `Subject` ? – DrNio Nov 22 '17 at 18:23
  • my intention was to help and not provide bad example :) in angular 2 they didn't have this example in their docs. thanks for the help though. when you edited the last comments i realised what you were talking about. – DrNio Nov 22 '17 at 18:26
  • Thanks guys for the info! – David Nov 23 '17 at 02:07