navigate not working

My app doesn't navigate to a new page. When I include in my app.component.html, it shows the check-out component so I know that it's routing to the right URL but I want to navigate to a new page, not stay on the same page.

In shopping-cart.component.ts:

mport { NgModule } from '@angular/core';
import { Router } from '@angular/router';
import {ActivatedRoute} from '@angular/router';
@NgModule(
{
imports:[
RouterModule
]
}
)
public checkOut(): void {
this.router.navigate(['check-out'], {relativeTo: this.route});
//this.router.navigateByUrl('/check-out/check-out');
}
ngOnInit(): void {
this.submitForm = new FormGroup({
});
}

In app-routing.module.ts

mport { Routes, RouterModule } from '@angular/router';
import { CheckOutComponent } from './check-out/check-out.component';
const routes: Routes = [
{
path: 'check-out',
component: CheckOutComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

In app.module.ts

import { AppRoutingModule } from './app-routing.module';
import { CheckOutComponent } from './check-out/check-out.component';
import { RouterModule } from '@angular/router';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
@NgModule({
declarations: [
CheckOutComponent,
ShoppingCartComponent
],
imports: [
RouterModule,
AppRoutingModule,
]
})
export class AppModule { }
constructor(public router: Router, private route: ActivatedRoute){}

shopping-cart.component.html

<form [formGroup]="submitForm" (ngSubmit)="checkOut()">
<input type="submit" value="Check Out">
form>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Maureen Moore6y ago
Thanks, Mageshwaran R. but it didn't help
Mageshwaran R6y ago
Hi Maureen Moore,
please refer below link:
https://www.javaguides.net/2019/06/navigate-to-another-page-with-button-in-angular.html