[Fixed] How to assign an initial value to Subject RxJS observable?


I’m developing an Angular 2 app, I need make changeable the order of my columns in a List, clicking on the title (as data-table works) and I get an idea from Angularfire 2 documentation examples, here is my code: (grupos.component.ts)

import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable    }  from 'angularfire2';
import { Subject } from 'rxjs/Subject';
import {AF} from "../providers/af";
import { Router } from "@angular/router";
{ EditGpoComponent } from '../edit-gpo/edit-gpo.component';

  selector: 'app-grupos',
  templateUrl: './grupos.component.html',
  styleUrls: ['./grupos.component.css']

export class GruposComponent implements OnInit {
  public newMessage: string;
  eventos: FirebaseListObservable<any[]>;
  sizeSubject: Subject <any>;

 constructor( af: AngularFire, private router: Router ) {
    this.sizeSubject = new Subject();
    this.eventos = af.database.list('/eventos', {
          query: {
           orderByChild: this.sizeSubject


  filterBy(size: string) {




  ngOnInit() {



Here is the code of my Grupos.components.html :

<div class="container">

  <div class="row"> 
  <a href="#" class="btn btn-info" routerLink="/add-gpo">+Add New Event</a> 
   <table class="table table-striped">
    <th><button (click)="filterBy('evento')">EVENT</button></th>
    <th><button (click)="filterBy('arrival')">ARRIVAL</button></th>
    <th><button (click)="filterBy('departure')">DEPARTURE</button></th>
    <th><button (click)="filterBy('hotel')">VENUE</button></th>
    <th><button (click)="filterBy('pax')">PAX</button></th>
   <tr *ngFor="let evento of eventos | async ">
      <td style="font-size: 1.2em">
      <a href="#" [routerLink]="['/editGpo']" [queryParams]="{eveId: evento.$key}"><span class="glyphicon glyphicon-edit" aria-hidden="true" title="edit event"></span></a>
      <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true" title="attendees"></span></a>
      <a href="#"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true" title="speakers"></span></a>
      <a href="#"><span class="glyphicon glyphicon-trash glyphicon " aria-hidden="true" title="delete event"></span></a>



As you see its working pretty cool, every time I click on the column Title Button, my table get the order of that column. But I have been searching for hours on how to give an initial value to “sizeSubject” (Subject), I like to assign the value on “evento”, so the table appears ordered by evento as I show it. By now just show me the Button titles and the table in blank, and If I click on any button, it show me the table in that order.

Any tips, or comments will be appreciate !


If you want a Subject that has an ‘initial value’, a better RxJS class to use is BehaviorSubject.

With BehaviorSubject, you pass your initial value into its constructor.

Leave a Reply

(*) Required, Your email will not be published