I want to navigate to a different page using Angular routing, but for some reason it's not working. Instead of moving to the designated Payment Component page, the content is staying on my Main Component. Why is this happening?
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';
import { PaymentComponent } from './payment/payment.component';
const routes: Routes = [
{ path: 'main', component: MainComponent },
{ path: 'payment', component: PaymentComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [MainComponent, PaymentComponent];
In the header component, clicking should take me to the Payment component page.
header.component.html
<div class="nav-content">
<div>
<div class="top-nav">
<h1>E-Book Store</h1>
<div class="top-nav-search">
<div class="shopping-button">
<a routerLink="payment" routerLinkActive="active">
<button type="submit" class="icon">Mon Panier</button>
</a>
</div>
</div>
</div>
</div>
<div class="header-content"></div>
</div>
app.component.html
<app-main></app-main>
<router-outlet></router-outlet>