Angular extend component with BehaviorSubject async pipe not working

angular async pipe not working
angular async pipe behaviorsubject
angular async pipe not subscribing
angular async pipe component
angular async pipe null value
angular async pipe once
angular async pipe get property
angular observable pipe

I can't seem to trigger the parent component's async pipe from a child component to update the view. Which might sound a bit confusing but let me try to explain by showing a simplified version of my code.

If have got a class that is extended by another class.

export class ParentComponent implements OnInit{
    protected subject$: BehaviorSubject<string[]>;

    ngOnInit() {
        this.subject$ = new BehaviorSubject<string[]>([]);
    }
}

With a template that looks like:

<span *ngFor="let niceString of subject$ | async">
    {{niceString}}
</span>

Extended by:

export class ChildComponent extends ParentComponent implements OnInit{   
    ngOnInit() {
        super.ngOnInit();

        this.subject$.next(['string1', 'string2']);
    }
}

The template is not updated in the browser. If I would call the line with subject$.next in the parent component it would update as expected and show the two strings in the browser.

So I tried to play around with it by calling SetTimeOut with 3 seconds delay to see if somehow it was called to fast. This didn't solve the issue. I also add the subject$.next in a function in the parent that I then called from the child and also this wouldnt solve it. But if I would call the same new function in the parent class the view was updated as expected.

I also added a custom subscription in the parent that listens to the subject$ like so:

protected subjectSubscription: Subscription;

this.subjectSubscription = this.subject$.pipe(take(2)).subscribe((justChecking: string[]) => {
    debugger;
});

Which will be triggered as expected but the view in the browser isnt updated with the values 'string1', 'string2'.

Am I missing something here?

(EDIT) Add StackBlitz: https://stackblitz.com/edit/angular-tt65ig

AsyncPipe doesn't work with RxJs Subject � Issue #12129 � angular , AsyncPipe works properly with BehaviorSubject, but it don't work with Rx Subject. its generally preferable to bind to properties on your component: export declare class Subject<T> extends Observable<T> implements I too have an async pipe which works with BehaviorSubject but not with Subject . The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks. Usage noteslink Exampleslink

I can't reproduce the described behavior. Have a working stackblitz here: https://stackblitz.com/edit/angular-gfxqpe

Do you maybe expect the parent's template to be used by the child? That won't work. You could reference the same html file like

@Component({
  selector: 'app-child',
  templateUrl: '../parent/parent.component.html',
  styleUrls: ['./child.component.css']
})

Async pipe not working, What happens in the Angular template is that the async pipe pipe is Angular extend component with BehaviorSubject async pipe not working. Yesterday, creating a document scanning program I was very surprised why angular does not update the view.import { Component } from '@angular/core'; import { Observable, BehaviorSubject } from 'rxjs';

Lifecycle methods are not inherited therefore rendering your ChildComponent's ngOnInit() method call useless.

Though I would much prefer you use a service design pattern, to do this the way you have things you could use super.ngOnInit().

subscribe() vs, The | async pipe unwraps the state object directly in the component's template, lots of great input and feedback (PR) while working on Angular NgRx using * ngIf or *ngFor are not accessible in the component's methods. Our Example. For example, you have a blogger component that will display blogger details and her posts. Blogger component will gets the list of posts from API. Instead of writing the logic of displaying the posts in the blogger component, you want to reuse the posts component that is created by your teammate, what you need to do is pass it the posts data.

Use in html the async pipe => �BehaviorSubject or Observable?, What I ideally want is to have the async pipe in the ngSubmit like so: <form {{ data.blah}} </ng-container> storeData$ with async pipe is not working when i insert this. So subscribing should only be done in Angular #Components and you should add #Component export class SomeComponent extends OnDestroy� So, this is not connected with the updateTask() function from the view-task component. Now, I need to subscribe my navigation component to the function getTask from the tas.service.ts, and this one, have to change everytime that we call the save() function in the view-task component. There is where be BehaviorSubject's comes;

Three things you didn't know about the AsyncPipe, You sure heard about Angular's AsyncPipe haven't you? Turns out the AsyncPipe is full of little wonders that may not be obvious at first sight. and finally expose an Observable to the template of our component. when working with http and it's basically the only scenario when working with Promises. In this article you’ll learn how to use Observables with Angular’s NgIf, using the async pipe and practices. Our friend NgIf has a not-so-obvious feature that lets us will help us deal with asynchronous operations - via the async pipe takes care of subscribing to Observable streams for us.

How to build Angular App with Observable Data Services, View Layer Architecture - Smart Components vs Presentational This poses a problem especially in bootstrapping situations, where the app is still initializing and not all subscribers have registered, for example not all async pipes had the This makes the BehaviorSubject the heart of the observable data� Async pipe, on the other hand works just fine with that. That is why you should definitely use the async pipe wherever possible. How to use the async pipe with *ngIfOf course, interpolation is not the only data binding the async pipe can be used with. You can also use it with the *ngIf directive:

Comments
  • Can't reproduce: stackblitz.com/edit/angular-e8eryq. Post a complete minimal example reproducing the issue as a stackblitz, as I just did.
  • Ok, i will. Thanks for the suggestion.
  • Here: stackblitz.com/edit/angular-tt65ig
  • Thanks for the explanation. This is totally it.. I already found that the ngOnInit was called too often, but couldn't come to this conclusion. The way to solve my problem and do what I intended is to combine your explanation with @MoxxiManagarn suggestion of using 'parent.component.html' in the child component. Thanks for clarifying, i can't believe it was from misunderstanding basic concepts... I am such a good developer, how could this be hahaha jk. Thanks guys!
  • Thanks for your reply. I think i didnt clarify this clear enough. In another component i call <app-child>, in the child's template i call <app-parent specific-attributes>. So i use the child to draw the much more complex parent and intent to have more children classes that are specific versions of the parent component.
  • Not true, have a look stackblitz.com/edit/angular-gfxqpe.
  • I don't understand what you're saying. stackblitz.com/edit/… is calling super.