Passing data to router-outlet as you would with a regular component is not currently possible in Angular, but it may be added in the future. The following syntax is considered invalid:
<router-outlet [dataToPass]="'something'"></router-outlet>
In this scenario, services can be used to share data between components. Using an observable is recommended because it provides real-time updates of the data:
data.service.ts
// Other service stuff
@Injectable()
export class DataService {
private navTitle$: BehaviorSubject<string> = new BehaviorSubject<string>('Default nav title');
public setNavTitle(newNavTitle: string): void {
// Sets new value, every entity subscribed to changes (`getNavTitle().subscribe(...)`) will receive the updated value
this.navTitle$.next(newNavTitle);
}
public getNavTitle(): Observable<string> {
// Allows `subscribe` on changes and obtains the updated value
return this.navTitle$.asObservable();
}
}
side-nav.component.ts
// Other component stuff
export class SideNavComponent implements OnInit, OnDestroy {
public navTitle: string = '';
private getNavTitleSubscription: Subscription;
constructor(private _dataService: DataService) { }
ngOnInit() {
// Updates the value of `this.navTitle` whenever `setNavTitle('data')` is called in the data service
this.getNavTitleSubscription = this._dataService.getNavTitle()
.subscribe((navTitle: string) => this.navTitle = navTitle);
}
ngOnDestroy() {
// Must `unsubscribe()` from subscription during destruction to avoid errors
this.getNavTitleSubscription.unsubscribe();
}
}
Any component loaded within the router-outlet:
any.component.ts
// Other component stuff
export class SideNavComponent implements OnInit {
private navTitleToSet: string = 'Any title';
constructor(private _dataService: DataService) { }
ngOnInit() {
// Set title from current component
this._dataService.setNavTitle(this.navTitleToSet);
}
}
In this situation, passing the value from the root component to the side-nav isn't necessary because there is already a subscription in the side-nav component providing access to the latest value. If navTitle is required in both the root and side-nav components, move the logic with the subscription to the root.
For a demonstration, visit the working STACKBLITZ.