CODEWITHSUNDEEP
javascripttypescriptangular
nicojs
nicojs

Reputation: 2055

How to update the view after changing the model in Angular?

How do I let Angular propagate the changes i did to the model. In AngularJS this would be really easy, but i cannot seem to get it working in Angular. I know the entire change detection system and view propagation is changed entirely. Somehow, i need to inform angular of the changes. But how can i do this in practise.

See this piece of typescript code:

import {Component, View, bootstrap, For} from 'angular2/angular2';

// Annotation section
@Component({
    selector: 'app'
})
@View({
    template: `
    <div *for="#user of users">
        {{user}}
    </div>
    `,
    directives: [For]
})
class App {
    users:Array<String>;

    constructor() {
        this.users = [];
        this.fillUsersAsync();
    }

    fillUsersAsync(){
        window['fetch']('http://jsonplaceholder.typicode.com/users')
            .then( resp => resp.json())
            .then( users => users.forEach(user => this.users.push(user.name)))
            .then( () => console.log('Retrieved users and put on the model: ', this.users));
    }
}

bootstrap(App);

You will see that, after the users get loaded into the model, the view doesn't update.

I'm using systemjs 0.16, angular 2.0.0-alpha.23.

See this plnkr for the example (currently, works only in chrome, as the new 'fetch' api is used)

Upvotes: 10

Views: 25024

Answers (4)

Alan Wagner
Alan Wagner

Reputation: 2250

Just answered it here Angular2 View Not Changing After Data Is Updated

Basically, there was a bug in Beta 2.0.0-beta.1.

Hope it helps!

Upvotes: 0

Vladyslav Sheruda
Vladyslav Sheruda

Reputation: 1876

To update data at view in AngularJS2 you should use Forms. You can read about this at this page or see more details here. If I understand Forms correctly, you should modify yout @View part like this:

@View({
    template: `
    <div *for="#user of users" control="users">
        {{user}}
    </div>
    `,
    directives: [For]
})

--edited

Try this:

import {Component, View, bootstrap, For} from 'angular2/angular2';

// Annotation section
@Component({
    selector: 'app'
})
@View({
    template: `
    <div [control]="users" *for="#user of users">
        {{user.value}}
    </div>
    `,
    directives: [For, forms]
})
class App {
    users:Array<String>;

    constructor() {
        this.users = new Control([]);
        this.fillUsersAsync();
    }

    fillUsersAsync(){
        window['fetch']('http://jsonplaceholder.typicode.com/users')
            .then( resp => resp.json())
            .then( users => 
                var usersArr = []
                users.forEach(user => 
                      usersArr.push(user.name))
                this.users = new Control(usersArr));
        }
 }

 bootstrap(App);

I am not sure that my answer is totally correct, but I can't find more information. Experiment with this code and may the Force be with you! :)

Also I found this link, very informative.

As I understand, when in constructor you should initialize youre users variable via new Control(some data) and then, in view template you can access to this data like this - {{users.value}}.

If it does not work: try the same but with very simple data, e.g. use string instead of an array.

And this video will helps to unserstand forms in ng2.

Upvotes: 1

nicojs
nicojs

Reputation: 2055

I found the issue. Apparently, its a bug to be fixed in alpha 27. See this bug report: https://github.com/angular/angular/issues/1913

Angular2 uses zonejs to know when to start the digest cycle (the dirty checking and update the view). As of now, zonejs is not triggered after fetching data with the new window.fetch().

Replacing the window['fetch'] line to this fixed the issue for me: Zone.bindPromiseFn(window['fetch'])('http://jsonplaceholder.typicode.com/users')

Upvotes: 2

shmck
shmck

Reputation: 5629

Ng-prefixes are back. For has now become ngFor for Angular2 versions alpha-24+.

import {NgFor} from 'angular2/directives';
@View({
  directives: [ngFor]
})

Then use *ng-for=#user of users" in the template.

Checkout the ngFor docs or a working example

Upvotes: -2

Related Questions