Angular 2 show same component with same data in other component

Question

Its more design question.

As an example I have a page that display the data, and I have a button that opens up the modal. Need to show exact same page inside the modal, and this modal is an external component.

More detail: I have a main component, inside which I have another component that receives some data from it via @Input decorator. When I view the page "main-component" it shows all data as expected from message-preview. However I created a separate modal component which is child message-preview component, which is triggered through the button inside . Ho

How can I duplicate (clone) exact same page as in in modal component without passing data again as its already there?

  <main-component>
     <app-message-preview [message]="selectedItem" [context]="context">
     </app-message-preview>
  </main-component>

External componenet

<modal-component>
        <app-message-preview [message]="selectedItem" [context]="context">
         </app-message-preview>
</modal-component>

Answer 1

You can use a BehaviorSubject to comunicate between services. Please check these links: http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

https://medium.com/dailyjs/3-ways-to-communicate-between-angular-components-a1e3f3304ecb