How to pass data on click in angular 5 from parent component to child component?

Question

I want to pass data on button click of parent component to child component and render child component as a separate page in angular 5 instead of rendering child component in parent's template.

Suppose, My child component is 'AstronautComponent' and when I add ,

<app-astronaut *ngFor="let astronaut of astronauts"
  [astronaut]="astronaut">
</app-astronaut >

this in parent template it is showing child template on same page instead of separate page.Actually I am able to get data from parent to child but on same parent template.I am using @Input annotation with service(as Observable).

Kindly Help.

Thanks

What do you mean by separate page? Is it a new tab in the browser altogether? — Ankit Sharma, Sep 05 '18 at 05:52
if you're opening a new page, I believe router params are your only option. but why use a single page application framework like angular and not use a single page is beyond me — Stavm, Sep 05 '18 at 05:58
@AnkitSharma Yes, it's a new tab.If parent is at 127.0.0.1:4200/parent then new tab at 127.0.0.1:4200/astronaut. — Naresh Pawar, Sep 05 '18 at 06:06
@Stavm As you suggested will go through router params.But do I achieve a parent template is fully replaced by child template using SPA?If yes then please tell how do it? — Naresh Pawar, Sep 05 '18 at 06:09

score 0 · Answer 1 · edited Sep 05 '18 at 06:12

0

You can use the router to open child component in new page like:

<a routerLink="/your_link">click here to open child component</a>

and define its path in

app.module.ts to open child component like:

{ path: 'your _link', component: child_component }

edited Sep 05 '18 at 06:12

Prashant Pimpale

10,349
9
44
84

answered Sep 05 '18 at 05:55

Dignesh

116
1
8

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

render child component as a separate page?

Then there is no parent child relationship

Have a parent component with router outlet

Parent.html

<router-outlet></router-outlet>

define routes for your 2 components with data

{ path: 'your _link', component: child_component, data: { ... any data } }

while navigating from component1 to component2 pass the data

https://stackoverflow.com/a/36835156/2742156

score 0 · Answer 3 · answered Sep 05 '18 at 06:25

You can possibly setup Angular routing defining your routes separately for both parent and astronaut. Please note these do not have any parent / child relationship anymore.

Once you have the data, you may store it in localStorage and navigate / open new tab using

window.open('http://127.0.0.1:4200/astronaut', '_blank');

The above statement will render another Angular application in the second tab with the astronaut component rendered. At this point of time in ngOnInit(), you may check the localStorage for the desired data, and if one is present, you can simply access it and show it in HTML as desired. This way, you no longer need an @Input() property.

How to pass data on click in angular 5 from parent component to child component?

3 Answers3