Reload child component when variables on parent component changes. Angular2

Question

I have a MasterComponent which loads header, footer, sidebar etc. On the header there is a dropdown whose options are set once the user is logged in. I want the header to be constant even if I navigate to different routes which loads different child component. Means that the selected option should not change and value of dropdown should be accessible in all the child component. Onchange of dropdown value the current child component should be updated/reloaded.

How should I approach this problem? I want to event-listener kind of functionality. Once the model from MasterComponent Changes , reload the current child component. On MasterComponent's variable variable update ChildComponent will listen to the update and run some function or call some API again and reload the ChildComponent.

// routes const appRoutes: Routes = [     {         path: '',         redirectTo: 'login',         pathMatch: 'full',     },     {   path: 'login', component: LoginComponent },     {   path: 'logout', component: LogoutComponent },     {         path: '',         component: MasterComponent,         canActivate: [AuthGuard],         children: [             { path: 'record/create', component: RecordCreateComponent }, // create record for selectedRestaurant in MasterComponent             { path: 'record/', component: RecordComponent }, // shows all record of current selectedRestaurant in MasterComponent             { path: 'record/:id/update', component:RecordUpdateComponent }, // show form to edit record having id             { path: 'record/:id', component: RecordComponent }, // show record details having id         ]     },     { path: '**', redirectTo: 'login' } ]; 

// MasterComponent @Component({     selector: 'master',     templateUrl: templateUrl,     styleUrls:[styleUrl1]  }) export class MasterComponent implements AfterViewInit, OnInit{     restaurants: Array<Restaurant> = [];     user:User;     selectedRestaurant: Restaurant;      constructor(private router: Router, private storageHelper:StorageHelper){     }     ngAfterViewInit() {     }     ngOnInit(){         this.user = JSON.parse(this.storageHelper.getItem('user'));         this.restaurants = this.user.restaurants;         this.selectedRestaurant = this.restaurants[0];         this.router.navigate(['/record/' + this.selectedRestaurant.id]);     }     onRestaurantChange(){         this.router.navigate(['/record/' + this.selectedRestaurant.id]);     }     createRecord(){     } } 

Answer 1

Use @Input to pass your data to child components and then use ngOnChanges (https://angular.io/api/core/OnChanges) to see if that @Input changed on the fly.

Answer 2

update of @Vladimir Tolstikov's answer

Create a Child Component that use ngOnChanges.

ChildComponent.ts::

import { Component, OnChanges, Input } from '@angular/core'; import { ActivatedRoute } from '@angular/router';  @Component({   selector: 'child',   templateUrl: 'child.component.html', })  export class ChildComponent implements OnChanges {   @Input() child_id;    constructor(private route: ActivatedRoute) { }    ngOnChanges() {     // create header using child_id     console.log(this.child_id);   } } 

now use it in MasterComponent's template and pass data to ChildComponent like:

<child [child_id]="child_id"></child>