Angular - Async pipe not updating View when AfterViewInit emits a new value

user_10070613 0
Viewed 1796

I have a simple component which holds a BehaviorSubject. In my template I use async pipe to update the view and get the latest value from my BehaviorSubject.

When the value is emitted from OnInit lifecycle hook, the async pipe updates the view with the correct value. But when I try to emit a value from AfterViewInit, the async pipe does not update the view.

Is this correct behavior? Why async pipe won't update the second emitted value?

Example component:

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent implements OnInit, AfterViewInit {
  
  public test$ = new BehaviorSubject(0);

  constructor(public cd: ChangeDetectorRef) {
    // All three values are logged - 0, 100, 200
    this.test$.subscribe(console.log);
  }

  ngOnInit() {
    // View is updated with 100 value
    this.test$.next(100);
  }

  ngAfterViewInit() {
    // View is not updated, async pipe is not triggered
    this.test$.next(200);
  }
}

Example component template:

<h1>{{ test$ | async }}</h1>
angular typescript
1 Answers

You are using OnPush change detection strategy. You should trigger check for changes manually:

ngAfterViewInit() {
    // View is not updated, async pipe is not triggered
    this.test$.next(200);
    this.cd.detectChanges();
}

ngOnInit is called before a view is checked. so 100 will be displayed at first.

ngAfterViewInit is called after an initial check for your view has been done. Since you are using OnPush change detection strategy, it will not trigger a change automatically.

user_123645580
Related