Subject.next not firing in ngOnInit

angular rxjs subject
user776686 picture user776686 · Jan 16, 2017 · Viewed 8.3k times · Source

Does anyone why this code (initializing a value from Subject) does not work? Is there a bug or by design? What am I doing wrong?

ts

import { Component, OnInit } from '@angular/core';
import { Subject } from "rxjs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.styl']
})
export class AppComponent implements OnInit {
  itemSupplier$: Subject<any[]> = new Subject<any[]>();

  items: any[] = [
    {name: 'Item 1', value: 'item1'},
    {name: 'Item 2', value: 'item2'},
  ];

  ngOnInit(){
    this.itemSupplier$.next(this.items);
  }
}

html

<ul>
    <li *ngFor="let item of itemSupplier$ | async">{{item.name}}</li>
</ul>

Answer

Steveadoo picture Steveadoo · Jan 16, 2017

It seems like a timing issue, if you throw it in a setTimeout it works.

setTimeout(() => this.itemSupplier$.next(this.items), 0)

EDIT

It is actually a better idea to use BehaviorSubject. This will provide the last value when it is subscribed to.

Related questions

Get current value of Subject.asObservable() inside Angular service

I want to write a simple toggle inside an Angular2 service. Therefore I need the current value of a Subject I observe (see below). import {Injectable} from 'angular2/core'; import {Subject} from 'rxjs/Subject'; @Injectable() export class SettingsService { private _panelOpened = …

Read More
Unit test Angular 2 service subject

I'm trying to write a test for an angular service which has a Subject property and a method to call .next() on that subject. The service is the following: @Injectable() export class SubjectService { serviceSubjectProperty$: Subject<any> = new Subject(); …

Read More
Angular2 Observable BehaviorSubject service not working

I'm trying to create my own observable service but after i get the initial data from the service, any updates to the service aren't propagated to any subscribers. Service looks like this: import { Injectable } from '@angular/core'; import { Observable, …

Read More