Observable loaded once, empty after navigating away and back

Viewed 113

I have a service which is provided in root with an Observable:

organizationSubject = new Subject<Organization>();
organization$ = this.organizationSubject.asObservable();

...

constructor(private http: HttpClient) {
    this.http
      .get<Organization>('organization')
      .subscribe((organization) => this.organizationSubject.next(organization));
  }

In a OrganizationSettings component I'm assigning the global Observable to a local Observable in ngOnInit:

this.organization$ = this.organizationService.organization$.pipe(
      tap((organization) => {
       // side effects here
      })

with the following template:

<div class="mt-6" *ngIf="organization$ | async as organization" [formGroup]="form">
  {{ organization.name }}
</div>

When I navigate to a route where I have OrganizationSettings for the first time, the page is rendered as expected and I see a div with Name of my organization.

Now, when I navigate to another route and come back, I dont't see the name of the organization.

Am I missing something here? I'm clueless...

1 Answers

You should probably use a BehaviorSubject or a ReplaySubject(1) instead of the basic Subject; since it won't emit the latest results.

Related