How to update subscribed value in html on change in Angular?

Question

After clicking "Edit", "editStatus" function is called, then the value of "order.status" is changing. But the html view remains the same - displays the old status of order. It changes only after refreshing the page. How can I do the status show the updated variable after change?

html:

<div *ngIf="order">
    <p>Id:<b> {{ order._id }}</b></p>
    <p>Status:<b> {{ order.status }}</b></p>
</div>
<button (click)="editStatus(order)">Edit</button>

ts file:

private subscribe: Subscription;
  order: Order;
  constructor(private orderService: OrderService, private route: ActivatedRoute, public router: Router) { }

  ngOnInit() {
    this.subscribe = this.route.params.pipe(
      map(({ id }) => id),
      switchMap((id: string) => this.orderService.getOrderById(id)))
      .subscribe((res) => {
        this.order = res;
      });
  }
  ngOnDestroy() {
    this.subscribe.unsubscribe();
  }

  editStatus(order) {
    const orderEdited = { order, status: 'order_canceled' };
    this.orderService.editStatus(orderEdited).subscribe(
      res => {
        console.log(res);
      },
      err => console.log(err)
    );
  }

order service:

private userOrdersUrl = 'http://localhost:3000/api/auth/user-orders';

getOrderById(orderId): Observable<Order> {
  return this.http.get<Order>(`${this.userOrdersUrl}/${orderId}`);
}
editStatus(order) {
  return this.http.put<Order>(this.userOrdersUrl, order);
}

Answer 1

Looks like a student homework...

You do not assign the updated order to your variable. Change to the following:

res => {
    this.order = res;
},