Angular2 view not updating after model is set from another component

Question

I have a simple web app that has an app model and a couple of components. When I update an array that I have in my model the view where that model is being consumed does not update. When I console log the model array I can see the model being updated just not the view. Any help would be greatly appreciated. Below please have a look at what I currently have.

overview.component.ts

import { Component, OnInit } from '@angular/core';
import { AppModel } from '../models/app-model';

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  providers: [AppModel]
})
export class OverviewComponent implements OnInit {
  constructor(public AppModel:AppModel) { }
  ngOnInit() {}
}

app-model.ts

export class AppModel {
  myArray:Array<any> = [];
  constructor(){}
}

overview.component.html (This is the view that is not being updated when the model gets updated)

<td *ngFor="let dataItem of AppModel.myArray">
  <span{{ dataItem }}</span>
</td>

This is how I am updating the array in the app model from another component

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { AppService } from '../services/app.service';
import { AppModel } from '../models/app-model';

@Component({
 selector: 'other-component',
 templateUrl: './other-component.component.html',
 providers: [AppService, AppModel]
})

export class OtherComponent implements OnInit {

constructor(private http: Http, public AppService:AppService,public AppModel:AppModel) {}

private updateModel() :void {
  this.AppModel.myArray = someArray;
}

ngOnInit() {}
}

Use a Subject, like explained in angular.io/docs/ts/latest/cookbook/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 8, 2017 at 9:10
You get an instance per provider. If you add a provider to a component, you get as many instances as you have component instances. Only the component itself and it's children can inject a provider from a component. You either need to provide the service on a common parent component or in @NgModule(). With providers only in @NgModule() you get a single instance for your whole application. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 8, 2017 at 10:10
@GünterZöchbauer adding the app model to providers array in @ngModule() and removing it elsewhere did the trick. Thank you for your time, patience and assistance much appreciated. — Galactic Ranger
– Galactic Ranger, Commented Mar 8, 2017 at 10:23

Günter Zöchbauer · Accepted Answer · 2017-03-08 10:26:33Z

1

For a service you get an instance per provider.
If you add a provider to a component, you get as many service instances as you have component instances. Only the component itself and it's children can inject a provider from a component.
You either need to provide the service on a common parent component or in @NgModule().
With providers only in @NgModule() you get a single instance for your whole application

answered Mar 8, 2017 at 10:26

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

Collectives™ on Stack Overflow

Angular2 view not updating after model is set from another component

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