Angular display a component elsewhere

Question

I need to display the full generated content of a component some where else in the html dom (although within the app-root).

Let me explain.

I have this code in app.component.html

<app-component-one></app-component-one>
<app-component-two></app-component-two>

Now app-component-two calls another component in it conditionally, like this:

<app-component-three *ngIf="show3"></app-component-three>

Now what it will do is that it will show the app-component-three data/html inside app-component-two. But for some reason I want that data/html to be placed/shown inside the app-component-one.

Is that possible?

EDITS

Use Case 1: app-component-one is on the left half of screen, app-component-two is on the right half. Some formatted and bound data is generated in app-component-two but I want to show it on the left side of the screen, not on right side where it was actually generated.

Use Case 2: app-component-one is outside all bounds and router-outlet, while app-component-two is actual app which generates reports. If the report is kept in there, it is not rendered properly. So I need to pull it out of the app-component-two component and its position: fixed css bounds.

Can you not simply put app-component-three inside app-component-one? and display it inside app-component-one based on some condition in app-component-two? — Ashish Ranjan
– Ashish Ranjan, Commented May 15, 2020 at 20:44
@AshishRanjan your idea makes sense, it will need indirection in code using data service, but it is workable. If there was some default practice in Angular that any expert like yourself knows, it will be highly appreciated. — M.Imran Mamda
– M.Imran Mamda, Commented May 15, 2020 at 20:48
Yeah, In both the cases, whatever data is needed for app-component-three, you generate that in app-component-two and pass it to app-component-one — Ashish Ranjan
– Ashish Ranjan, Commented May 15, 2020 at 20:49

Ashish Ranjan · Accepted Answer · 2020-05-15 21:00:09Z

1

IMO, instead of first rendering DOM and then plucking it to display somewhere else, the approach should be to keep app-component-three inside app-component-one itself.

It's just that app-component-one needs to know when should it render its new child, we can pass that information and any other data if required from app-component-two through a shared service. The Shared service may have an Observer/Observable which app-component-two publishes and app-component-one subscribes.

answered May 15, 2020 at 21:00

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Angular display a component elsewhere

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related