Best way to call an observable in a service from a dumb/presentational component

Question

I'm using the smart/dumb components pattern in Angular which means dumb child components are not allowed to inject services. In a dumb child component I'm creating there is a button with a click event that should result in a call to an observable method in a service injected in the smart parent component. What is the best way to connect the call to the services observable method from the dumb components click event?

I could emit an event from the dumb component to the parent component and then in the called method in the parent create a subscription to the service method. But that means an explicit subcribe which means an explicit unsubscribe is needed. It would be better if I could use the async pipe. I would prefer to just bind the service method to the dumb component using @input and then invoke with:

(click)="observable$ | async"

But that isn't a valid syntax for the click event.

So what would be the best way to do this?

Fan Cheung Fan Cheung · Accepted Answer · 2019-11-26T02:10:47

you can handle the unsubscription in parent or use async pipe in parent. Normally click are the trigger of a series of events. You can chain them up and use it in view with async pipe. For example

suppose it is a click to get userdata

// child comp
this.childClickEvent=new EventEmitter()

// child view 
<button (click)="childClickEvent.emit()"></button>

// parent comp
this.childClick=new Subject()
this.userdata=childClick.pipe(switchMap(_=>http.get(userUrl)))

// parent view
<child-comp (childClickEvent)="childClick.next()"></child-comp>
<section *ngIf="userdata | async">{{userdata.name}}</section>

Best way to call an observable in a service from a dumb/presentational component

1 Answers