How to assign an initial value to Subject RxJS observable?

Question

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';

@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) {
   this.sizeSubject.next(size); 

   }

  editaGrupo(keyGrupo){

    this.router.navigate(['/add-gpo']);
  }

  ngOnInit() {

  }

}

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

<div class="container">


<br><br><br>
  <div class="row"> 
  <a href="#" class="btn btn-info" routerLink="/add-gpo">+Add New Event</a> 
  <br><br>
   <table class="table table-striped">
   <thead>
   <tr>
    <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>
    <th>FUNCTIONS</th>
    </tr> 
   </thead>
   <tbody>
   <tr *ngFor="let evento of eventos | async ">
        <td>{{evento.evento}}</td>
        <td>{{evento.arrival}}</td>
        <td>{{evento.departure}}</td>
      <td>{{evento.hotel}}</td>
      <td>{{evento.pax}}</td>
      <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>

      </td>
    </tr>
    </tbody>

</table>
</div>
</div>

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 !

Cardiomegaly

Answer 1

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.

Antetype

can we use startwith rxjs operator to set default value to the subject – Ghetto

Answer 2

Instead of using BehaviorSubject, you can also use a normal Subject and use the Rxjs operator startWith to set the initial value.

Infusorian