Angular Rxjs: Observable does not display on view

Question

I have the following code that is supposed to display the length of an audio file:

ngAfterViewInit() {
    this.duration$ = fromEvent(this.player.nativeElement, 'loadeddata').pipe(
      map((event: any) => {
        return this.convertDuration(event.target.duration);
      }));
  }

But it won't display on my HTML that looks like this: <div>{{ duration$ | async }}</div>

What could be the problem here? I tried to subscribe in my component and this works:

this.duration$.subscribe(x => console.log(x));

Initialization: duration$: Observable<string>;

After looking at @EliyaCohen's demo, I realized that the reason why my code doesn't work is because I have ChangeDetectionStrategy.OnPush enabled. I think my issue now is how to trigger a change detection without calling detectChanges() or markForChange() if that's possible.

Here is my demo.

Any javascript error in console? Does it work if you replace return this.convertDuration(event.target.duration); with return 10; ? — HTN
– HTN, Commented May 13, 2020 at 7:54
No error. Already tried putting a dummy string and same result. As I've said, the subscribe() function works as expected so it's weird why it doesn't print in the HTML. — franco
– franco, Commented May 13, 2020 at 7:59
I can't think of anything without the whole code. this.duration$.subscribe(x => console.log(x)); is used right after the assignment in ngAfterViewInit? — HTN
– HTN, Commented May 13, 2020 at 8:28
That is the entire code. I've added how I initialized my variable. convertDuration() returns the mm:ss format of the duration. this.duration$.subscribe(x => console.log(x)); is below the assignment and I only added that line to test that the observable works. It's not really part of the code. — franco
– franco, Commented May 13, 2020 at 8:37
Can you try <div *ngIf="duration$">{{ duration$ | async }} </div> — Ashish Ranjan
– Ashish Ranjan, Commented May 13, 2020 at 8:40

Andrei Gătej · Accepted Answer · 2020-05-13 10:19:00Z

1

I think it should work this way:

@Component({
  /* ... */
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PlayerComponent implements AfterViewInit {
  duration$: Observable<string>;

  @ViewChild("video", { static: true }) player: ElementRef<HTMLElement>;
  @Input() source: string;

  ngOnInit() {
    this.duration$ = fromEvent(this.player.nativeElement, "loadeddata").pipe(
      map((event: any) => event.target.duration)
    );
  }
}

I'm using { static: true }, since the video element does not depend on any conditions, like ngIf.

The problem with ngAfterViewInit is that the async pipe will create its subscriptions before this lifecycle hook takes place. This means that by the time ngAfterViewInit is invoked, the async pipe will have already figured out its subscriptions, but since this happened before this hook, there was no subscription, so nothing to subscribe to.

answered May 13, 2020 at 10:19

Andrei Gătej

12.1k1 gold badge22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

franco Over a year ago

Yes, thank you! This works exactly as expected now.

Eliya Cohen · Accepted Answer · 2020-05-13 08:56:23Z

0

I couldn't reproduce your problem, so I made a simple demo that might help (don't mind the errors of codesandbox).

I created a <video> tag
I bound the video tag and called it imported it from @ViewChild
on ngAfterViewInit I used the exact code you did, but without convertDuration since I'm not sure what it does exactly.
I subscribed in the HTML to the observable and it worked.

If you could share a little bit of your code, I might be able to reproduce it.

answered May 13, 2020 at 8:56

Eliya Cohen

11.6k14 gold badges79 silver badges127 bronze badges

1 Comment

franco Over a year ago

I was fiddling around with your demo and I realized where my code differs. I have ChangeDetectionStrategy.OnPush enabled. Here's my version of the code that has OnPush and that's when it stops working. How can I trigger a change detection here?

Collectives™ on Stack Overflow

Angular Rxjs: Observable does not display on view

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related