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 !
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.