Angular2 Click Event Not Updating Template

Question

I'm experimenting with Angular2 and trying to get a simple click event to update a template. The click event fires the toggleValue() function, but does not update the template. What I've done seems to be in line with various tutorials out there (though they're based on the Alpha version); I just can't figure out where I'm going wrong with such a simple example. Code as follows:

/// <reference path="typings/tsd.d.ts" />

import 'reflect-metadata';
import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/bootstrap';

@Component({
    selector: 'app',
})
@View({
    template: `
        <div>Value: {{value}}</div>
        <button (click)="toggleValue()">Toggle</button>
    `
})
class App {

    value: boolean = true;

    toggleValue () {
        console.log('toggleValue()');
        this.value = !this.value;
    }
}

bootstrap(App);

I'm using Angular version 2.0.0-beta.0

Try this out: plnkr.co/edit/AM8oYG4VqalcQMnlE3MP?p=preview Note that I changed import {bootstrap} from 'angular2/bootstrap'; to import {bootstrap} from 'angular2/platform/browser'; — kendaleiv
– kendaleiv, Commented Dec 30, 2015 at 22:46

peak · Accepted Answer · 2016-02-29 05:52:27Z

4

Perhaps it could be, because you didn't include the angular-polyfills.js file. The latter contains the support of zones, that are responsible for detecting updates of component fields. That way, templates can then be updated to take into account new values...

Do you include this file in the index.html file of your application?

edited Feb 29, 2016 at 5:52

peak

119k21 gold badges185 silver badges218 bronze badges

answered Dec 30, 2015 at 22:42

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

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

Collectives™ on Stack Overflow

Angular2 Click Event Not Updating Template

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