Angular replace component

Question

There is a case where the data are being sent from two different components; let's say OneComponent and TwoComponent and there is a ResultComponent which receive these data via Input() decorator. Also, in ResultComponent the data are merged using OnChanges interface:

  ngOnChanges(changes: SimpleChanges) {
    if (changes['dataFromCompTwo']) {
      this.dataFromComp = this.dataFromCompTwo;
    }
  }

and data are shown in this component, but component is instantiated twice and the data are double. How to check if data are already sent from one of the components and show only last sent data?

STACKBLITZ => I would like to show Here is result just once.

Qortex · Accepted Answer · 2018-11-15 13:52:03Z

1

This is inter-components communication. You should use one of the techniques described on this Angular documentation page.

I personnaly favor communication through a service because components are then not coupled at all: the communication method does not depend on their inclusion in the DOM so you can move them around as you please, it won't break.

answered Nov 15, 2018 at 13:52

Qortex

7,5124 gold badges46 silver badges62 bronze badges

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

Comments

Mac_W · Accepted Answer · 2018-11-15 13:43:56Z

1

if you have two components sending changes then you can access these using:

changes.componentOne
changes.componentTwo

The SimpleChanges has another property called firstChange which you can use to check if this is the first change coming from that specific component like this:

changes.componentOne.firstchange - this would mean that this is the first change sent by the components

answered Nov 15, 2018 at 13:43

Mac_W

3,0056 gold badges19 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular replace component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related