Is there a way to dynamically change the content of a page loaded using router link without duplicating the HTML code for the header and footer sections each time? I want to navigate between different pages with routerLink and have only the main content area change without repeating the topBar and botBar code.
/*This is the routing for every page there is. The HTML shown is for /douroVinhas*/
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomePageComponent} from './home-page/home-page.component';
import {DouroVinhasComponent} from './douro-vinhas/douro-vinhas.component';
import {AVerOMarComponent} from './a-ver-omar/a-ver-omar.component';
import {MediterraneoComponent} from './mediterraneo/mediterraneo.component';
const routes: Routes = [
{ path: '', redirectTo: '/homePage', pathMatch: 'full' },
{ path: 'homePage', component: HomePageComponent },
{ path: 'douroVinhas', component: DouroVinhasComponent },
{ path: 'aVerOMar', component: AVerOMarComponent },
{ path: 'mediterraneo', component: MediterraneoComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }.hotelPage {
display: grid;
grid-template-columns: auto;
grid-template-rows: 180px auto;
}
...
<div class="hotelPage">
<div class="topo">
<div class="topNav">
<button>Change Content</button>
</div>
</div>
<div class="content">This is what I want to be loaded using router link, basically this part changes by pressing a button on topNav.</div>
<div class="botBar">
</div>
</div>