Angular 9 - View will not update after variable change in subscribe

Question

I could not make it persistent behavior in HTML part while using subscribe to the http client in the Anglar 9. I tried following stackoverflow posts -

Following is the code what I am trying

export class BaseComponent implements OnInit, OnDestroy {
  list: any[];
  unsubscribe$: Subject<any> = new Subject();

  constructor(private ngZone: NgZone,private changeRef: ChangeDetectorRef) {
 
  }

  ngOnInit(): void {
     return this.http
            .get(environment.apiBaseUrl + url, this.getOptions())
            .pipe(takeUntil(this.unsubscribe$))
            .subscribe(()=>{
                this.ngZone.run(()=>{
                   this.list = response.data;
                })
                this.list = response.data;
                this.changeRef.detectChanges();
                this.changeRef.markForCheck();
            });

  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }


}

// Nothing working for me.

@yurzui its in my code .... when i hard refresh then it works.... — Veshraj Joshi, Jul 04 '20 at 18:17
That's good that you can see it in your code but it is hard for us to reproduce — yurzui, Jul 04 '20 at 18:18
what is in " .pipe(takeUntil(unsubscribe))" - unsubscribe named variable? have you checked in subscribe that it works? A lot of mess in the code here... — Anton Marinenko, Jul 04 '20 at 18:18
@TonyMarko sorry it is this.unsubscribe$, to prevent the memory leak, yes subscribe is working here. — Veshraj Joshi, Jul 04 '20 at 18:20

score 2 · Accepted Answer · answered Jul 04 '20 at 18:27

2

Your onInit function should be like this, if you use onPush strategy:

 ngOnInit(): void {
     return this.http
            .get(environment.apiBaseUrl + url, this.getOptions())
            .pipe(takeUntil(this.unsubscribe$))
            .pipe(retry(3), catchError(this.handleError));
            .subscribe(response => {
                this.list = response.data;
                this.changeRef.markForCheck();
            });

  }

answered Jul 04 '20 at 18:27

Anton Marinenko

2,749
1
10
16

If it's not working, show your component decorator and the template, – Anton Marinenko Jul 04 '20 at 18:27
I already tried all combination of... I have not set any strategy for changeDetection – Veshraj Joshi Jul 04 '20 at 18:35
1

I recommend you use async pipe instead of subscription. Anyway without working code, it's impossible to recommend anything. – Anton Marinenko Jul 04 '20 at 18:49

score 2 · Answer 2 · answered Jul 05 '20 at 06:56

2

I think u should make ur life easier by using async pipes.

ngOnInit(): void {
    let urURl = 'https://reqres.in/api/products';
     this. list$ = this.http
            .get(urURl)

  }

app.component.html

{{list$|async|json}}

I have created a demo for u on stackblitz

answered Jul 05 '20 at 06:56

hanan

1,768
1
14
19

will try and let you know – Veshraj Joshi Jul 05 '20 at 07:18
thanks, code you suggested also worked but in project above pattern is being used. And i do not see how to prevent memory leak.Anyway you deserve upvote. – Veshraj Joshi Jul 05 '20 at 08:23
@VeshrajJoshi if u are looking not to leak memory then async is the best u don't have to manage subscriptions, its doing it own it own. u just have to give ur observable. – hanan Jul 05 '20 at 15:13

Angular 9 - View will not update after variable change in subscribe

2 Answers2