sstorie / experiments Goto Github PK

this.connectionState$ = this.channelService.connectionState$
.map((state: ConnectionState) => { return ConnectionState[state]; });

<div>
    <span>Connection state: {{connectionState$ | async}}</span>
</div>

I can check that the connectionState$ changed from console.log but in the template view it's not changing, but when I clicked on a Button that does nothing just a normal button the connectionState$ suddenly shows up.

<button (click)="sample()">Click Me</button>

inside my component
public sample() {
 //nothing in here
}

import {Component} from "angular2/core";

import {IdService} from "./id.service";

@Component( {
    selector: 'child',
    template: `
        <div class="child">
            <span><a href="#" (click)="regenerate()">Regenerate</a></span>
            <span>{{guid}}</span>
        </div>
    `
})
export class ChildComponent {

    guid:string;

    constructor(
        private idService: IdService
    )
    {
        this.regenerate(); 
    }

    regenerate() {
        this.idService.regenerate();
        this.guid = this.idService.id;
    }
}

    providers: [
        provide(IdService, { useFactory: () => {
            return () => {
                return new IdService();
            }
        }})
    ]

private appendStatusUpdate(ev: ChannelEvent): void {
        // Just prepend this to the messages string shown in the textarea
        //
        let date = new Date();
        switch (ev.Data.State) {
            case "starting": {
                this.messages = `${date.toLocaleTimeString()} : starting\n` + this.messages;
                break;
            }

            case "complete": {
                this.messages = `${date.toLocaleTimeString()} : complete\n` + this.messages;
                break;
            }

            default: {

                console.log(ev.Data.PercentComplete);  <--This updates

                /****NOTE : THIS IS NOT UPDATING ******/
                this.messages = `${date.toLocaleTimeString()} : ${ev.Data.State} : ${ev.Data.PercentComplete} % complete\n` + this.messages;    
            }
        }
    }

import { platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
import {ApiConfig} from './app/api.service';
import {AppComponent} from './app/app.component';


if (environment.production) {
  enableProdMode();
}


export function initApp(apiUrl: string, apiToken:string, apiSession:string){
// make the config ref to start the new running program
  let apiConfig = new ApiConfig();
  apiConfig.apiUrl = apiUrl;
  apiConfig.apiToken = apiToken;
  apiConfig.apiSession = apiSession;

  console.log("Inside the function  api_url :"+apiUrl+" api_token : "+apiToken+"--- sessiontoken : "+apiSession);
}


bootstrap(AppComponent, [
      provide("api.config", {useValue: apiConfig})
  ]); 

 platformBrowserDynamic().bootstrapModule(AppModule);

bootstrap(AppComponent, [
      provide("api.config", {useValue: apiConfig})
 ]);