Yes this is pretty simple, when you want to pass to component that are in router-outlet
you need to use services
, actually that component do not exist in the template before you go to the right path, so usual bindings don't work here.
So the best way to work this around is to create some simple service
In the service
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class DataTransferService {
private products= new BehaviorSubject<any>([]);
cast= this.products.asObservable();
sendAnything(data) {
this.products.next(data);
}
}
then inject your service into both constructors of your parent and child component
In parent component
constructor(private dataTransfer: DataTransferService){}
then create a method
shareData(data){
this.dataTransfer.sendAnything(data) // to send something
}
and call it from the parent.component.html with
(click)="shareData(data)" // data is the parent data that you want to share
In child component
inside the ngOnInit method add:
ngOnInit() {
this.dataTransfer.products.subscribe(res=> this.var = res) // var is the property that you want to assign the data to it.
}
to get the data and work with it.
more info and examples You can find in doc