Passing value from one component to other component using Input property when using router-outlet

Question

I have my parent component where the is defined to display other component(childComponent) when the route changes, I want to pass a value from parentComp to childComp, usually we include the selector in place of router-outlet if we don't use routes and pass using @Input property. How can I achieve the same when using routes

ParentComponent

@Component({
    selector : 'parent',
    template : `<h1>Home</h1>
            <router-outlet test1="test"></router-outlet>
    `,
})
export class parentComp{
    test = "testing";
}

ChildCompoent

@Component({
    selector : 'child',
    template : `<h2>Home</h2>
    `,
})
export class childComp implements onChanges, onInit{
    @Input() test1;
    ngOnChanges(){
        console.log(this.test1);
    }
ngOnInit(){
            console.log(this.test1);
}
}

I want to get the value of test1 from parent to child component and print in console using @Input property.

I'm getting the value of test1 as undefined when printing the value in console

Aravind Aravind · Accepted Answer · 2017-07-02T02:54:15

You cannot define an @Input() variable for a router-outlet.

Instead you have the following as alternative options

Use Route params
Use Query params
Shared service to share the data
State Management using redux tools

Passing value from one component to other component using Input property when using router-outlet

1 Answers