passing dynamic data to nested components

Question

i have a main page with a list of orders ('list-orders' component), every time i click an order i open an 'order-details' component via router-outlet.

in the order-details component i have in the html a component selector ('app-list-products'), in that selector i want to pass the data of the products of the order ('order.products')

im using an NgRX state management and get the order data in the 'list-orders' component in the OnInit cycle. i do the same for the 'order-details' component (to get the correct order details).

but every time im changing the order im viewing (choosing from the 'list-orders' view), the products i get are of the previous order i wanted.

can anyone explain me why does it happen? how can i fix it?

list-order.html:

<ul class="list-group" *ngIf="orders.length">
    <li
      class="list-group-item"
      *ngFor="let order of orders; let i=index">
      <a routerLink='{{i}}'>
        <p>Name: {{ order.name }}</p>
      </a>
    </li>
  </ul>

list-order.ts:

ngOnInit() {
    this.subscription = this.store.select('order')
      .pipe(map(orderState => {
        return orderState.orders;
      }))
      .subscribe(orders=> {
        this.orders = orders;
      });
  }

order-details.html:

<div class="row" *ngIf="order">
    <p>name: {{ order.name|| "------" }}</p>
    <app-list-products [orderProducts]="order.products"></app-list-products>
</div>

order-details.ts

order: Order = null;
ngOnInit() {
    let currUrl;
    this.routeSub = this.route.params.pipe(
      switchMap(() => {
        currUrl = this.route.snapshot['_routerState'].url.substring(1).split('/');
        return this.store.select('order')
       }))
      .subscribe(orderState => {
          this.order = orderState['order'][+currUrl[1]];
      });
  }

score 0 · Accepted Answer · answered Feb 19 '20 at 01:02

with the help and steps in the questions:

How to re-render a component manually Angular 5

Is there any way I can pass dynamic data to a component in Angular?

solution:

in details-order.ts i added:

private ref: ChangeDetectorRef to the constructor

and called this.ref.detectChanges(); at the end of the subscribe method (after assigning to 'this.order')

passing dynamic data to nested components

1 Answers1