Page template inheritance (sharing views between pages)


How can I have share a common view/template between two pages? Something like:

For another example, I’d like to have a background map that two (or more) pages share. This seems like a common situation but I don’t see anything on how to nest or inherit pages in the documentation.


make a reusable component .


Can you elaborate? Making the a shared component is not the problem. Including it in both the pages is the problem. I don’t want to re-render it when the page changes - I want each page to share a common template so that only the content unique to the page loads on page change.


Create a module where @NgModule.declaration : [YourSharedViewComponent]
@NgModule.export : [YourSharedViewComponent]

Then if all your page contain a module (which should be the case) import the new module to your @NgModule.import : [YourSharedModule]

Else, just import it in the app.module.ts : @NgModule.import : [YourSharedModule]

And you are free to use the view in your parent component.