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

Answer 1

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?