Service constant property

Hi there,

I’m having trouble with a property of one of my service that is getting updated when i dont want to.

I explain myself.

When I open the home view i’m making a GET request that is returning my data. The data is then stored in my service like this.




setRoomTypes(roomTypes) {
        this.roomTypes = roomTypes;

Everything is fine at this point. But later in the app i use the data of roomTypes to create a list of room types that the user can select. In my file “inspection.ts” I have a property “roomTypes” that is set to my service property like this:


this.roomTypes = this.currentEdlService.getRoomTypes();

I use these roomTypes to create a list in a Popover like this:

  showTypeList(event) {
        let popover = this.popOverCtrl.create(TypeListPage, { roomTypes: this.roomTypes });
        popover.onDidDismiss((popoverData) => {
            if (popoverData) {
                this.selectedPiece.title = popoverData.description;
                this.selectedPiece.typeDefined = true;
                this.selectedPiece.parametres = popoverData.parameters;
                this.parameters = this.selectedPiece.parametres;

As you can see i save informations contained in my popoverData in some properties of my object “selectedPiece”.

But that’s the probleme now, my object roomTypes is also modified each time i change something in “selectedPiece” and the changes are reported in my original object in currentEdlService. Which I don’t want to.

roomTypes are supposed to be constant and never been updated.

Am I missing something ? Because I really can’t figure it out. Hope someone can help me on this one. Important to notice is that i never use my function setRoomTypes() in another component.

popOver page

import { Component } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
    template: `
      <ion-list-header>Type de pièces</ion-list-header>
      <button *ngFor="let type of typesPiece.roomTypes" ion-item (click)="close(type)">{{type.description}}</button>
export class TypeListPage {

    typesPiece: any;
    typeSelected: any;

    constructor(public viewCtrl: ViewController, public params: NavParams) {
        this.typesPiece = this.params.get('roomTypes');

    close(type) {
        this.typeSelected = type;

Well this was a “basic” object reference error. The most obvious is sometimes so hard to see.

Find the answer here: javascript - Why and when to use angular.copy? (Deep Copy) - Stack Overflow

Without deep copy or using angular.copy, changing value of property or adding any new property update all object referencing that same object.

What I needed is create a deep copy of my object contained in my service. Which i managed to do this way:

this.roomTypes = JSON.parse(JSON.stringify(this.currentEdlService.getRoomTypes()));