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.

Answer 1

Normally, you would use an EventEmitter plus @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