6

I need to update some data in parent component by calling a function in it after an event has occurred in the child component. Here my child components are in router outlet of parent

parentComponent.html:-

<div class="row">
     Parent component
</div>
<router-outlet></router-outlet>

Parentcomponent.ts:-

fetchRequestsStatus(role, user) {
if (this.userRole) {
  this.dashboardService.getStatusCount(role, user).subscribe(
    res => {
      console.log(res)
    },
    err => {
      console.log(err)
    })
}

}

Now on a button click in the child, I need to call function fetchRequestsStatus(role, user) by passing a parameter from the child. I have seen @input @ output decorators for sharing data but here my child component is inside the router.

How can I proceed with this?

Masoud Darvishian
  • 3,754
  • 4
  • 33
  • 41
Ameerudheen.K
  • 657
  • 1
  • 11
  • 31
  • take a look at this https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication/36018798#36018798 – ysf Jun 20 '19 at 10:10

2 Answers2

1

If you're thinking something like

<router-outlet (onButtonClick)="fetchRequestsStatus($events)"></router-outlet>

it's invalid as the child component you're thinking is a child component is actually a sibling component at runtime.

I am guessing this is your app component. So, you can have a subject in the app.service which can be an observer for the child and an observable for the parent.

Aakash Verma
  • 3,705
  • 5
  • 29
  • 66
  • i have created a shared service but how can i get a function results as observable? private messagesource = new BehaviorSubject(); currentmessage = this.messagesource.asObservable(); that currentmessage must include a result from a httprequest – Ameerudheen.K Jun 20 '19 at 10:25
  • 1
    Use `of` from `rxjs`. Read [here](https://stackoverflow.com/questions/47889210/why-we-should-use-rxjs-of-function) – Aakash Verma Jun 20 '19 at 10:30
  • iam using real backned apllication, not returning fake data – Ameerudheen.K Jun 20 '19 at 10:40
  • 1
    Haha, the answer posted over there doesn't just solve for fake data. Are you trying to communicate an HTTP response from the service to the parent? – Aakash Verma Jun 20 '19 at 10:43
  • 1
    Your change message then needs to be this way `changeMessage(r,u) { this.getStatusCount(r,u).subscribe(res => this.messageSource.next(res));}` – Aakash Verma Jun 20 '19 at 10:46
  • yes i need to call parent http request and update parent ui by hitting a button in child component – Ameerudheen.K Jun 20 '19 at 10:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195264/discussion-between-ameer-pappay-and-aakash-verma). – Ameerudheen.K Jun 20 '19 at 11:18
1

The cleanest solution would be to create a shared service between the parent and child component, service that holds an Subject used by parent and child component.

Refer to this answer for code sample: https://stackoverflow.com/a/41989983/5620535

Make sure you use the new providedIn: 'root' angular feature to make sure the service is only instantiated once. (singleton)

ASCE
  • 46
  • 3