Angular2 Binding issue

Question

I am from the c# world and new to Angular so this may not be a good approach, however, I have an application that submits a lot of commands to a server. Whether this was successful or not is then displayed in the client. To encapsulate this I wrote two components 1) An ObservablsCommandService that subscribes to an observable and sets the results internally. 2) ServerCommandStatus - UI wrapper around this to display results:

1:

@Injectable()
export default class ObservableCommandService {

    public hasErrors: boolean;
    public errorMessage: string;
    public showSuccess: boolean;
    public successMessage: string;

    constructor() {
        this.hasErrors = false;
    }

    public executeNonQuery(op: Observable<Response>) {
        op.subscribe((response) => {

        this.showSuccess = true;
            this.successMessage = "Success :)";

            setTimeout(() => {
                this.showSuccess = false;
                this.successMessage = '';
            }, 4000);
        },
            (err) => {

                this.errorMessage = `Error! An error occurred :( status code ${err.status}`;

                this.hasErrors = true;

                setTimeout(() => {
                    this.hasErrors = false;
                    this.errorMessage = '';
                }, 4000);

            });
    }

}

2:

@Component({
    selector: 'server-operation-status',
    providers:[ObservableService]
})
@View({
        template: `
    <div [hidden]="!observableService.hasErrors">
        <div class="alert alert-danger">
            {{observableService.errorMessage}}
        </div>
    </div>

    <div [hidden]="!observableService.showSuccess">
        <div class="alert alert-success">
            {{observableService.successMessage}}
        </div>
    </div>

<button (click)="toggleError()">Toggle an Error</button>
`
})
export class ServerCommandStatus {
    private observableService: ObservableCommandService ;

    constructor(observableService: ObservableCommandService ) {
        this.observableService = observableService;
    }

    public toggleError() {
        this.observableService.hasErrors = !this.observableService.hasErrors;
        this.observableService.errorMessage = ':*( terrible things happened';
    }

My understanding is that injectables are singletons in Angular2.

This example does not work. All code is called and returns correctly, however the results are not displayed in the server command status.

When i click the toggle button - for test, the error toggles correctly.

The observable is placed into the service from another component.

It seems like the binding isn't being updated here??

This might be a strange way of doing things as I am new to Angular2 - and Angular per se. Keep up the good work Google, its awesome :)

If anyone can help i'd be very appreciative.

Thanks

Answer 1

@Injectable() s are not singletons. providers are.
If you want to share an instance don't add it as provider everywhere but instead on a common parent or bootstrap(AppComponent, [ObservableCommandService]) which is the root and therefore the common parent of everything in your Angular application.