Passing Observable to another component in Angular

Question

I have two components details and details-view.

In the details I have to pass obserwable by @Input() into second component.

Details Component

 res$: (id: number, type: string) => Observable<DetailsResponse[]>;
 constructor(private service: Service) {
  this.res$ = service.getData;
 }

Service

 getData(id: number, type: string): Observable<DetailsResponse[]>{
   const params = new HttpParams().append('typename', type);
   return this.http.get<any>('api/id', {params: params});
 }

Detalis-View HTML

<dwtalis-view [resources$]="res$"></dwtalis-view>

Detalis-Viev TS Component

@Input()
resouces$: Observable<DetailsResponse[]>

My question is how to subscribe and get the data from resources$ observable in the detalis view component. Subscribing this object retunrs error "resources$ is not a finction can not subscribe"

Assuming this isn't a typo: this.res$ = service.getData is just passing the function definition. If you actually want an observable, you need to execute the function this.res$ = service.getData(). Alternatively, if you do mean to pass the function definition then your typing for resource$ is wrong, and it should be (id: number, type: string) => Observable<DetailsResponse[]> to match res$ from the parent component — Vlad274
– Vlad274, Commented May 30, 2019 at 17:54
like vlad said you are passing function instead of observable. In your case you need to call that resources$() function to get the observable out from it. resources$().subscribe. — hunterTR
– hunterTR, Commented May 30, 2019 at 19:34

Vlad274 · Accepted Answer · 2019-05-30 18:11:09Z

2

The typing doesn't match. res$ is a function (id: number, type: string) => Observable<DetailsResponse[]>, but resouces$ is an observable Observable<DetailsResponse[]>;

Based on your comments, you need to pass a function because the arguments aren't available in the parent component. So, you need to accept a function as @Input and then execute it in the child component.

Child Component

@Input()
resouces$: (id: number, type: string) => Observable<DetailsResponse[]>;

// Use ngOnInit since @Input properties are populated at this time
ngOnInit() {
    // Example arguments
    this.resouces$(this.id, this.type).subscribe(results => {
        // Do whatever you need to do with the results
        console.log(results);
    })
}

answered May 30, 2019 at 18:11

Vlad274

6,9642 gold badges37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avin Kavish · Accepted Answer · 2019-05-30 18:00:42Z

2

Apart from the typo at service.getData(), it is also important to know when input properties are available to be bound. Input's are not set in the constructor, they are available in the ngOnChanges life cycle hook every time an input changes. or in ngOnInit if you want to bind just the first time it is received.

https://angular.io/guide/lifecycle-hooks

answered May 30, 2019 at 18:00

Avin Kavish

9,0872 gold badges27 silver badges39 bronze badges

Comments

Julian W. · Accepted Answer · 2019-05-30 18:10:48Z

0

You can change the DetailsViewComponent like the following code

export class DetailsViewComponent implements OnInit, OnChanges {

  @Input() resouces$: (id: number, type: string) => Observable<DetailsResponse[]>;

  constructor(
  ) {}

  ngOnInit() {
  }

  ngOnChanges(data) {
    if (data.resouces$ && this.resouces$) {
      this.resouces$(this.id, this.type).subscibe(res => {});
    }
  }

}

edited May 30, 2019 at 18:10

answered May 30, 2019 at 18:00

Julian W.

1,5819 silver badges20 bronze badges

3 Comments

Bartosz Stępak Over a year ago

Arguments for getData() is known in the second component so it does't work

Julian W. Over a year ago

Is id and type defined when the DetailsViewComponent created?

Bartosz Stępak Over a year ago

Yes ,,,,,,,,,,,,

Collectives™ on Stack Overflow

Passing Observable to another component in Angular

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related