Why Angular not update variable or Modal in using services but its working when I click on somewhere of page

Question

When I update my modal or variable using services then its not working or there is no error, but when I click on somewhere on a page its working. Please tell me the solution.

Note :[ I also provide series ]

Code

  orderDetailById:  OrderDetail[];
     loadAllOrderDetail(id) {  
         this.orderService.getOrderDetail(id).subscribe(res=>{
                this.orderDetailById = res as OrderDetail[];
                console.log(this.orderDetailById);
            });
      }

but when I used like this its working:

  orderDetailById:  Observable<OrderDetail[]>;

but Observable have not function like (length, every) etc etc check the attachment first.

Also see this just 00:11 sec video. https://youtu.be/sCuMxsp-d4w

Answer 1

inject the ChangeDetectorRef in your constructor

constructor(
    ...
    private cd: ChangeDetectorRef,
    ...
)

and then use it with detect changes

loadAllOrderDetail(id) {
    this.orderService.getOrderDetail(id).subscribe(res => {
        this.orderDetailById = res as OrderDetail[];
        console.log(this.orderDetailById);
        this.cd.detectChanges();
    });
}

I am pretty sure this will help you, but you need to understand why. Maybe you changed the detection strategy