angular 2 trigger a modal open outside of router module

Question

I want to trigger the hiding/showing of a div in a component template outside the router outlet by clicking a button in a component template within the router outlet:

app component

`<div class="content col-md-10 container-fluid">   
    <company-add-form></company-add-form>
    <router-outlet></router-outlet>
</div>`

company-add-form component

`<div>
    <p>Make me showwwww</p>
    <button class="btn">Close</button>
</div>`

company-page component (which will render inside router-outlet)

`<div>
    <button class="btn">Open company add form</button>
</div>`

Thoughts

Usually theres a pretty consistent parent to child relationship but because router outlet sits in between you can't just use ViewChild.

J J B J J B · Accepted Answer · 2016-12-20T04:30:31

You can not bind with components that are added by the router.

You should use a shared service @angular/injectable view component communication for examples from the @angular cookbook.

angular 2 trigger a modal open outside of router module

1 Answers