How to set the initial value for an RxJS object as observable?

Question

I am developing an Angular 2 application, I need to change the order of my columns in the list by clicking on the heading (how the data table works), and I will get the idea from the Angularfire 2 documentation, 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 can see, it works pretty cool, every time I click on the column header button, my table gets the order of that column. But I was looking for a few hours on how to give the initial value of "sizeSubject" (Subject), I like to assign the value of "evento", so the table looks ordered by evento when I show it. Now just show me the Button headers and the table in empty, and if I click on any button, it will show me the table in that order.

Any tips or comments would be appreciated!

Answer 1

If you want the theme to have an “initial meaning”, the best RxJS class for this is BehaviorSubject.

With BehaviorSubject, you pass your initial value to your constructor.