Angular: How to correctly access data in Component

Question

I was wondering what was the correct way to access data in a component. I've read a couple times already that you should let angular templates handle subscriptions But how would you access current values for certain methods inside the component.ts file?

Suppose i have the following component:

@Component({...})
class TestComponent {

  testData: Observable<TestData>

  ngOnInit(){
    this.testData = this.service.getData().pipe(share())
  }
}

It has a sendDataABCProperty which sends the property ABC of our testData to some arbitrary service.

  sendDataABCProperty() {
    this.testData.pipe(first()).subscribe(data => this.service.sendData(data.abc))
  }

Now, when using the above approach i still have to subscribe to my data, exactly what i was trying to prevent.

Another way would be to copy the data and not use a stream, but since i'm trying to make it more reactive, that's a way i'ld like to avoid.

A further example would be some kind of "display and edit" component. Suppose I get the my display data from some service who I access afterwards aswell to update the data. But i need the id (of the data) for it. What would be the best way to access the id? Copying it at the beginning (using tap() / subscribe())? Using a BehaviorSubject? Or something completely different?

If you don't want to subscribe, then you can use tap() operator instead of subscribe(). — Nikhil
– Nikhil, Commented Nov 22, 2019 at 22:47
The service should not matter. And neither does the tap trick, because i would still have to subscribe somewhere. I'm trying to rephrase it. — mortom123
– mortom123, Commented Nov 22, 2019 at 22:55

DeborahK · Accepted Answer · 2019-11-22 23:23:48Z

1

There are several questions in your post, I'll address the part about getting an id.

I have a List component that displays a list of products. The user clicks on a product to display/edit it. I handle that with a Subject/BehaviorSubject

In the service

  private productSelectedSubject = new BehaviorSubject<number>(0);
  productSelectedAction$ = this.productSelectedSubject.asObservable();

In the component (when the user clicks a product)

  onSelected(productId: number): void {
    this.productService.selectedProductChanged(productId);
  }

In the service

I then have a stream property in the service whose pipeline is automatically re-executed each time a different selected product is emitted:

  selectedProduct$ = combineLatest([
    this.products$,                    // Stream of all products
    this.productSelectedAction$
  ]).pipe(
    map(([products, selectedProductId]) =>
      products.find(product => product.id === selectedProductId)
    ),
    tap(product => console.log('selectedProduct', product)),
    // do whatever else needs to be done when a new product is selected
  );

Does that answer that part of your question?

I have sample code here: https://github.com/DeborahK/Angular-RxJS

This video may also be useful: https://www.youtube.com/watch?v=Z76QlSpYcck

edited Nov 22, 2019 at 23:23

answered Nov 22, 2019 at 23:14

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

2 Comments

mortom123 Over a year ago

Yes, it does. So the approach with using a BehaviorSubject seems to be the way to go.

DeborahK Over a year ago

If you want to follow a reactive approach, then the code should "pass" data around by emitting that data into a stream. Any code that is "watching" for changes to that stream will be notified and will get the "passed" data.

Hai Vu · Accepted Answer · 2019-11-22 22:53:03Z

0

You cannot access the data of service until you subscribe it. However, you can modify the data using pipe. But note that the modification only happens when you subscribe to the observable.
I don't know this is what you want or not. You can also use resolver to get the data before the component load & retrieve the data using snapshot.That way you don't have to subscribe to a observable in your component.

Please read this article for more detail, https://alligator.io/angular/route-resolvers/

answered Nov 22, 2019 at 22:53

Hai Vu

362 bronze badges

Collectives™ on Stack Overflow

Angular: How to correctly access data in Component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related