Currently working on a web application using Angular and I have set up a navbar with links to different components. However, when I click on a link in the navbar, the URL changes but the content of the components does not display. Any assistance would be greatly appreciated. Thank you in advance.
Here is the code from app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { BlogComponent } from './blog/blog.component';
import { ContactComponent } from './contact/contact.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'services', component: ServicesComponent },
{ path: 'portfolio', component: PortfolioComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'contact', component: ContactComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Code snippet from app.component.html:
<app-main-nav></app-main-nav>
<router-outlet></router-outlet>
Main navigation component HTML:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/home">Home</a>
<a mat-list-item routerLink="/about">About</a>
<a mat-list-item routerLink="/services">Services</a>
<a mat-list-item routerLink="/portfolio">Portfolio</a>
<a mat-list-item routerLink="/blog">Blog</a>
<a mat-list-item routerLink="/contact">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Markvira</span>
<span class="spacer"></span>
<a mat-button routerLink="/home">Home</a>
<a mat-button routerLink="/about">About</a>
<a mat-button routerLink="/services">Services</a>
<a mat-button routerLink="/portfolio">Portfolio</a>
<a mat-button routerLink="/blog">Blog</a>
<a mat-button routerLink="/contact">Contact</a>
</mat-toolbar>
<!-- Add Content Here -->
</mat-sidenav-content>
</mat-sidenav-container>