Child to parent communication in Angular 6

Question

I have header and body in my Angular components.

Have a notification count in the header and would like to update the count whenever the count gets changed by user in the body.

app.routing.ts

export const AppRountes: Routes = [{
   component: LayoutComponent,
   children: [
    {
     path: 'notification',
     loadChildrent: './notification/notification.module#NotificationModule'
    }
   ]
  }]

I have a NotificationComponent for notification.

The notification icon and the count is there in the LayoutComponent.

Here, I would like to notify from NotificationComponent to LayoutComponent.

I am able to communicate from LayoutComponent to NotificationComponent using @ViewChild, but not sure how to communicate from child to parent.

Best method would be using a shared service between the components. — Anuradha Gunasekara, Aug 30 '18 at 05:08
This is not an option for now as it needs lots of changes in the existing code. — user1578872, Aug 30 '18 at 05:10

score 2 · Accepted Answer · answered Aug 30 '18 at 05:13

2

Normally, you would use an EventEmitterplus @Output, since you're using the router you cannot really do this. I think you can find an answer here though: Angular 2 output from router-outlet

answered Aug 30 '18 at 05:13

Christian S.

295
1
2
12

Child to parent communication in Angular 6

1 Answers1