Search code examples
javascriptangulartypescriptangular2-routing

Angular Routing changes the page

I would like to go to another page, for that I use Angular routing but the routing does not work,

I stay on the same page and the text which should be displayed on the other page (payment Component) is displayed on my (main component) why ?

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];

here in header component when I click I would like to go 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>

enter image description here

Solution

  • You should remove <app-main></app-main> from your app.component.html, since that main component is bound to specific route and should not be visible all the time.

    After you remove it, the main component should be available by /main path, and payment component by /payment path.