Why is my property not updated inside the "Area"?

Question

I am starting to enter Angular2 for a hobby project and are faced with the fact that I do not know how to debug or search yet.

I started using the ng2-play repository .

I have two simple classes (this code is greatly simplified for this post):

words-ui.js

export class WordsUI {
  constructor() {
    new Words(data => this.words = data);
  }
}

words-ui.html

<ol *if="words" reversed>
  <li *for="#entry of words" title="Word for week starting {{entry.date}}">{{entry.word}}</li>
</ol>

words-data.js

export class Words {
  constructor(cb) {
    firebase
      .child('words')
      .on('value', data => cb(data.val()));
  }
}

, , - "", , words . , , . , . , setTimeout "" words , .

, , , . ES6, : TypeScript AngularJS 2.

, , , , - .

UPDATE 1: . words "" WordsUI .

Answer 1

, - , , - , . GitHub Weekly Word.

WordsUI , Word. , - , " " zones.js ( ).

Word ; , , .

, - , , - , .

-ui.js

export class WordsUI {
  constructor() {
    this words = new Words();
    this.update();
  }

  update() {
    this.words
        .read(words => {
            this.wordList = words;
        })
  }
}

-data.js

export class Words {
  constructor() {
    firebase = new Firebase('http://weekly-word.firebase.com').child('words');
  }

  read(cb) {
    firebase
        .on('value', data => {
            cb(data);
        })
  }
}