2
Answers

navigate not working

Maureen Moore

Maureen Moore
4y
629
1
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:
i
  1. mport { NgModule } from '@angular/core';  
  2. import { Router } from '@angular/router';  
  3. import {ActivatedRoute} from '@angular/router';  
  4.   
  5. @NgModule(  
  6. {  
  7. imports:[  
  8. RouterModule  
  9. ]  
  10. }  
  11. )  
  12. public checkOut(): void {  
  13.   
  14. this.router.navigate(['check-out'], {relativeTo: this.route});  
  15.   
  16. //this.router.navigateByUrl('/check-out/check-out');  
  17. }  
  18. ngOnInit(): void {  
  19. this.submitForm = new FormGroup({  
  20. });  
  21. }  
In app-routing.module.ts
i
  1. mport { Routes, RouterModule } from '@angular/router';  
  2. import { CheckOutComponent } from './check-out/check-out.component';  
  3.   
  4. const routes: Routes = [  
  5. {  
  6. path: 'check-out',  
  7. component: CheckOutComponent  
  8. }  
  9. ];  
  10.   
  11. @NgModule({  
  12. imports: [RouterModule.forRoot(routes)],  
  13. exports: [RouterModule]  
  14. })  
  15.   
  16.   
  17. export class AppRoutingModule { }  
In app.module.ts
  1. import { AppRoutingModule } from './app-routing.module';  
  2. import { CheckOutComponent } from './check-out/check-out.component';  
  3. import { RouterModule } from '@angular/router';  
  4. import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';  
  5.   
  6. @NgModule({  
  7. declarations: [  
  8. CheckOutComponent,  
  9. ShoppingCartComponent  
  10. ],  
  11. imports: [  
  12. RouterModule,  
  13. AppRoutingModule,  
  14. ]  
  15. })  
  16. export class AppModule { }  
  17.   
  18.   
  19. constructor(public router: Router, private route: ActivatedRoute){}  
shopping-cart.component.html
  1. <form [formGroup]="submitForm" (ngSubmit)="checkOut()">  
  2. <input type="submit" value="Check Out">  
  3. </form>  
Answers (2)
Next Recommended Forum