Hello, I am facing an issue that I need help with. I am using a routerLink to navigate to a child route in my Angular application. Although the URL changes as expected, the view does not update to display the component associated with the active child route.
Here is the code snippet from app.component.ts:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
This is the HTML code:
<div class="wide component">
<div class="page-wrap">
<img class="logo" src="../../assets/img/our-work-component-logo.png"><br>
<h2>Component Elite</h2>
<h3>Web portal and promotions</h3>
<p class="short-description">Lorem Ipsum</p>
<a routerLink="component" class="button orange-button">View More</a>
</div>
</div>
And this is the configuration in app.module.ts:
import { OurWorkComponent } from './our-work/our-work.component';
import { ComponentComponent } from './our-work-content/component/component.component'
export const ROUTES: Routes = [
{ path: 'our-work', component: OurWorkComponent,
children: [
{ path: 'component', component: ComponentComponent }
]
}
];
@ngModule({
declarations: [
OurWorkComponent,
ComponentComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(ROUTES)
],
providers: [],
bootstrap: [AppComponent]
})