ListView does not refresh/update when a new value is added


Hello everyone -

I’m using {N} + Angular 4 + Observables to get a ListView populated (working) and refreshed/updated when a new value is posted against a Rest API (doesn’t work). Below the code excerpt


export class User {
       public name: string;
       public telephone: string; 
       public email: string;
       public password: string;

       public constructor(name: string, telephone: string, email: string, password: string){
  = name;
           this.telephone = telephone;
  = email;
           this.password = password;


import { Injectable } from '@angular/core';
import { Http, Headers } from "@angular/http";
import { BehaviorSubject } from "rxjs/Rx";
import 'rxjs/Rx';

import { Config } from './../shared/config';
import { User } from './../models/user';

export class EntreUsersService {

    public users$ = new BehaviorSubject<any>([]);

    constructor(private http: Http) { }

    listUsers() {
        return this.http.get(Config.apiUrl + "users/")
            .map(result => result.json());

    createUser(data) {
        const headers = new Headers({ 'Content-Type': 'application/json' });
        return + "users/", data, { headers: headers });


The above “Config.apiUrl” is simply the path to the resource in the server. Working properly.


import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs/Rx";
import 'rxjs/Rx';

import { HeaderComponent } from "../../components/header-component/header.component";
import { MySearchBarComponent } from "../../components/my-search-bar/my-search-bar.component";
import { AppListComponent } from './../../components/list-component/app-list.component';
import { EntreUsersService } from './../../services/entre-users.service';
import { User } from './../../models/user';

    selector: 'users-page',
    templateUrl: 'pages/users/'
export class UsersPage implements OnInit {

    hint: String;
    actionBarTitle: String;
    clientPath: String;
    iconStatus = true;
    propertyTarget: String;
    public users: Observable<User>;

    public constructor(private entreService: EntreUsersService) { }

    public ngOnInit() {
        this.actionBarTitle = "Usuários"
        this.clientPath = "usercreateedit";         
        this.users =  this.entreService.listUsers();



<GridLayout rows="auto, auto, *" columns="*">
    <StackLayout row="0" col="0">
        <header-component [actionBarTitle]="actionBarTitle" [componentPathBack]="pathBack" [componentPath]="clientPath" [iconStatus]="iconStatus"></header-component>
    <StackLayout row="1" col="0">
        <my-searchbar [theHint]="hint"></my-searchbar>
    <StackLayout row="3" col="0">
        <ListView [items]="users | async" class="list-group">
            <ng-template let-item="item">
                <StackLayout class="list-group-item">
                    <Label class="h2" text={{}}></Label>


import { Component, OnInit } from "@angular/core";
import { Http, Headers } from "@angular/http";
import { Observable, BehaviorSubject } from "rxjs";
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { CameraComponent } from "../../../components/camera-component/camera.component";
import { HeaderComponent } from "../../../components/header-component/header.component";
import { EntreUsersService } from './../../../services/entre-users.service';
import { User } from './../../../models/user';

    selector: 'user-create-edit',
    templateUrl: 'pages/users/users-detail/'
export class UserCreateEditPage implements OnInit {

    public users: Observable<User>;
    public usersForm: FormGroup;

    public constructor(private entreService: EntreUsersService, private fb: FormBuilder) {
        this.usersForm ={
            "name": ["", [Validators.required]],
            "telephone": ["", [Validators.required]],
            "email": ["", [Validators.required]],
            "password": ["", [Validators.required]]

    public ngOnInit() {
        this.actionBarTitle = "Criar novo usuário";
        this.clientPath = "";
        this.iconStatus = false;

    public onSave(data): void {
            (response) =>  this.users = response.json()


<header-component [actionBarTitle]="actionBarTitle" [componentPath]="clientPath" [iconStatus]="iconStatus"></header-component>
    <StackLayout [formGroup]="usersForm">
        <GridLayout rows="auto, auto, auto, auto, auto, auto" columns="auto, *" class="form-parent">
            <StackLayout row="0" col="0" class="form-child">
            <StackLayout row="0" col="1" class="form-child" verticalAlignment="bottom">
                <TextField hint="Insira um nome" formControlName="name"></TextField>

            <StackLayout row="1" col="0" class="form-child">
                <Label text="{{'fa-phone' | fonticon}}" class="fa-gray" verticalAlignment="bottom"></Label>
            <StackLayout row="1" col="1" class="form-child">
                <TextField hint="Número de telefone" formControlName="telephone"></TextField>

            <StackLayout row="3" col="0" class="form-child">
                <Label text="{{'fa-envelope-o' | fonticon}}" class="fa-gray" verticalAlignment="bottom"></Label>

            <StackLayout row="3" col="1" class="form-child">
                <TextField hint="Endereço de e-mail" formControlName="email"></TextField>

            <StackLayout row="4" col="0" class="form-child">
                <Label text="{{'fa-key' | fonticon}}" class="fa-gray" verticalAlignment="bottom"></Label>

            <StackLayout row="4" col="1" class="form-child">
                <TextField hint="Senha" formControlName="password" secure="true"></TextField>
            <StackLayout row="5" col="1" class="form-child">
                <GridLayout rows="auto" columns="*, *">
                    <StackLayout row="0" col="0">
                        <Button class="form-button" text="Cancelar" (tap)="cancel()"></Button>
                    <StackLayout row="0" col="1">
                        <Button class="form-button" text="Salvar" (tap)="onSave(usersForm.value)"></Button>


It seems that I am not properly dealing with Observables. Any advice would be very appreciated!!!

Thank you,



Hello everyone, Is there any advice or a tutorial regarding this subject? I’m really struggling with that!
thank you


Please check here for some tips:

Or here:


Thank you! saved the day