My app doesn’t navigate to a new page. When I include <router-outlet></router-outlet> 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:
import { 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
import { 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>