Shil Nevado Shil Nevado - 9 months ago 40
TypeScript Question

How to update "value" of Observable. I would need a good tutorial


Well, debuging I noticed that the value is updating only here:

(res) => {this._customerService.setCustomer(this.getCustomerFromResponse(res)).subscribe()},
(err) => {console.error(err)}

The function getCustomerFromResponse(response) return a customer object, I could also do a new customer right there or whatever I want that the value is passed. But calling the function setCustomer(customer) in the examples of my old post (behind) the customer isn't being passed to the value of the observable. Why?

I'm working with observables but I don't unsertand them at all. I'm facing NOW this problem, but I have constantly problems. I have this service:

import {Injectable} from "@angular/core";
import {Customer} from "./customer";
import {Observable} from "rxjs/Rx";
import "rxjs/add/operator/map";
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';

export class CustomerService {
private customer: Customer;
private customer$: Observable<Customer>;

constructor() {
this.customer = new Customer;
this.customer$ = Observable.of(this.customer);
setCustomer(customer: Customer) {
return this.customer$.do(val => this.customer = val);

getCustomer() {
return this.customer;

getObservable() {
return this.customer$;


I call getObservable() from a the class app.component in order to update the value eachtime:

res => {this.customer = res})

I post now each class:


import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Response } from "@angular/http";
import { User } from '../../model/user';
import { Customer } from '../../model/customer';
import { UserService } from "../../model/user.service";
import { CustomerService } from "../../model/customer.service";
import { ClientsService } from './clients.service';
import { HttpWrapperService } from "../../shared/httpwrapper.service";
import { NotificationsService } from '../../shared/notifications.service';
import { Notification } from '../../shared/notifications.model';

The method:

customerSelect(customer: Customer) {
let user = this._userService.getUser();
user.customer_uuid = customer.uuid;


import {Component, Input, OnInit} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { User } from '../../model/user';
import {UserService} from "../../model/user.service";
import { Customer } from '../../model/customer';
import {CustomerService} from "../../model/customer.service";
import {LoginService} from "./login.Service";
import {HttpWrapperService} from "../../shared/httpwrapper.service";
import {AuthService} from "../../shared/auth.service";
import { NotificationsService } from '../../shared/notifications.service';
import { Notification } from '../../shared/notifications.model';

the method:

ngOnInit() {
this.sub = this.route.params.subscribe(params => {
if (params['flag'] == 0) {
let nullcustomer = new Customer(); = "";
ngOnDestroy() {

FYI I'm using angular core 2.0.0 stable release. As I'm always facing problems with observables I would be grate if someone could provide me a good link tutorial just for obserbables for angular2. I search a lot but I can't find a good enought one.

Answer Source

I found the solution but I can't understand it well, if someone could explain me why it works would be better.

First, I have to get the current customer and I can't create a new Customer and clear all the properties. So in both places (home and clients) the function would be:

formatCustomer(customerNew: Customer) {
        let customer = this._customerService.getCustomer();
        if (customer == null) {
            customer = new Customer;

        customer.prop1= customerNew.prop1;
        customer.prop2= customerNew.prop2;