jamesmorgan

export class AdminDashboardComponent implements OnDestroy {

    /** Public data */
    competitions:[];

    /** Subscriber */
    private _competitionsEventHandler:EventEmitter<>;

    constructor(private _competitionsService:CompetitionsService) {
        // Get a handle on the event emitter to react on the changes

jamesmorgan

// You must import this or the actual feature you require form rxjs to use things like delay(), map(), retry()
import 'rxjs/Rx';

...
export class Test {
  constructor(private _http:Http) {
    _http.get('http://localhost:8080/competitions')
      .map(res => res.json()) // map to json
      .delay(2000) // atrificially delay the 
      .retry(3) // attempt to retry x number of times

jamesmorgan

setTimeout(function () {
    this._competitionsEventHandler = this._competitionsService.onCompetitionsChanged.subscribe((competitions) => {
        this.competitions = competitions;
    });
}.bind(this), 5000);

jamesmorgan

export class CompetitionsService {

    // Create a Subect to observe
    private _competitionsSource:Subject<Competition[]> = new Subject<Competition[]>();

    // Publicly expose the Observable - called share() to allow multiple observers
    competitionsChanged$:Observable<Competition[]> = this._competitionsSource.asObservable().share(); 

    constructor(private _http:Http) {
        _http.get('http://localhost:8080/competitions')

jamesmorgan

export class AdminDashboardComponent implements OnDestroy {

    /** Public data */
    competitions:Competition[];

    /** Subscriber */
    private _competitionsSubscription:Subscription;

    constructor(private _competitionsService:CompetitionsService) {
        // Subscribe an changes which may happen

jamesmorgan

// Include the full set of RxJs features
import "rxjs/Rx";

// Add individual imports per function which is required
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';

jamesmorgan

export class DashboardComponent implements OnInit {
    ngOnInit():any {
       // Load some data ...
    }
}

jamesmorgan

export class DashboardComponent implements OnActivate {
    routerOnActivate(nextInstruction:ComponentInstruction, prevInstruction:ComponentInstruction):any|Promise<any> {
        // Load some data ...
    }
}

jamesmorgan

/**
 * This is a special hook because it is called before your component is instantiated.
 * Its parameters are (next, previous) which are the components you're routing to and the component
 * you've come from (or null if you have no history) respectively.
 */
@CanActivate((next, prev) => {
    // No simple way to load data, how to easily inject services or how to provide the result to componenet once loaded.
    // Work arounds can be found but are not ideal IMHO.
    return true;
})

jamesmorgan

<div class="media-body">
    <p>{{ competition?.description }}</p>
    <p>{{ competition?.user?.name }}</p>
    <p>{{ competition?.game?.title?.shortName }}</p>
</div>