Pass values between two components in angular on the same view

Question

I'm Using angular 4 where I want a layout like below

Here, I Want a similar layout. Where the container 1 is of form fields and the second container shows a list of items which were added from the left side form. I want it to be dynamic, When the user clicks add an item, it should show the description field after that when the user clicks confirm, the item should be added to the right side pane like below.

But the problem am facing is Since am using 2 different components am using a common service to handle the data. But when am entering the details in the fields, the right side pane list starts changing. I'm not sure where it went wrong. Am pushing data into list array in common service when the user press confirm button. that works fine, But the problem is when the comp 1 field changes the comp 2 list data changes to the value entered in the comp fields. Help me with this or suggest me a better way to get the layout I want.

Thanks in advance

Can you set up a quick stackblitz example because i have no idea what is even happening in your story. — Carsten, Jul 06 '18 at 05:50

score 0 · Answer 1 · answered Jul 06 '18 at 06:05

In this case, You can use a service with subject. A service in Angular is a singleton, meaning it is managed as a single instance. So if each of the components access the service, they will access the same shared data.

export class cartService{
    private prodCount = 0;
    prodCountCountChange: Subject<number> = new Subject<number>();
    UpdateCount(count: number) {
        this.prodCount = count;
        this.prodCountCountChange.next(this.prodCount);
    }
}

In your component you can do this,

  this._cartService.UpdateCount(this.prod.length);

score 0 · Answer 2 · answered Jul 06 '18 at 06:05

Problem:
Let say your service is

ShareContent {
 items: any[];
}

And both your component1 and component2 REFERENCE to that ShareContent.items. I guess your items is the Array. Array in javascript is using reference. So when your edit the items in component1, the component2 will also be affected
Because they hold the same reference.

Solve: Make only component2 hold the same reference with the service. The items in component1 will hold the different reference but same data at first. To solve this, you should
First in your component1

Component1 {
  constructor(shareContent: ShareContent) {
   //Here you should let your items in component1
   //hold the different reference to items
   //You could look up for spreading(...) operator
   this.items = [...this.shareContent.getItems()];
  }
  addItem(item) {
   this.shareContent.add(item);
  }
}

Secondly your component 2

 Component2 {
  constructor(shareContent: ShareContent) {
   //Here you SHOULD let your items
   //hold the same reference with the service
   this.items = this.shareContent.getItems();
  }
  addItem(item) {
   this.shareContent.add(item);
  }
}

ShareContent {
  items: any[];
  addItem(item) {
    this.items.push(item);
  }
}

Pass values between two components in angular on the same view

2 Answers2