How to update the view after changing the model in Angular2

By : nicojs
Source: Stackoverflow.com
Question!

How do I let angular2 propagate the changes i did to the model. In angularjs 1.x this would be really easy, but i cannot seem to get it working in angular2. 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)

By : nicojs


Answers

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

By : shmck


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!



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.



This video can help you solving your question :)
By: admin