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

Günter Zöchbauer · Accepted Answer · 2016-02-19 10:49:34Z

0

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

answered Feb 19, 2016 at 10:49

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Binding issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related