I am trying to navigate to another component from my current component like so:
this.router.navigate(['/relationshipInfo']);
The above statement is not routing to a different component, Below is my code in app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PersonalInfoComponent} from './PersonalInfo/PersonalInfo.component';
import {RequiredInfoComponent} from './RequiredInfo/RequiredInfo.component';
import {RelationshipInfoComponent} from './relationshipInfo/relationshipInfo.component'
const routes: Routes = [
{path: 'PersonalInfo', component: PersonalInfoComponent},
{
path: '',
children: [
{path: 'RequiredInfo', component: RequiredInfoComponent},
{path: 'RelationshipInfo', component: RelationshipInfoComponent},
]
},
{path: '**', redirectTo: 'PersonalInfo', pathMatch: 'full'},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
below is my app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PersonalInfoComponent } from './PersonalInfo/PersonalInfo.component';
import { MaterialModule } from './shared/Material.Module';
import { FormsModule } from '@angular/forms';
import { RequiredInfoComponent } from './RequiredInfo/RequiredInfo.component';
import { RelationshipInfoComponent } from './relationshipInfo/relationshipInfo.component';
@NgModule({
declarations: [
AppComponent,
PersonalInfoComponent,
RequiredInfoComponent,
RelationshipInfoComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MaterialModule,
FormsModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
I am trying to route on the click of my button. the button exists in PersonalInfo page. Below is the HTML and .ts code:
Onlineand below is my .ts code:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-PersonalInfo',
templateUrl: './PersonalInfo.component.html',
styleUrls: ['./PersonalInfo.component.css']
})
export class PersonalInfoComponent implements OnInit {
public Loaded = false;
public btnshow=true;
constructor(private router:Router) { }
ngOnInit() {
}
onlinePage(){
this.router.navigate(['/RelationshipInfo']);
this.router.navigateByUrl('/RelationshipInfo');
}
Continue()
{
//this.router.navigate(['/RequiredInfo']);
this.router.navigateByUrl('/RequiredInfo');
}
Cancel(){}
}
any help will be greatly appreciated.
Angular routes path are case sensitive. You have you route defined as:
{path: 'RelationshipInfo', component: RelationshipInfoComponent},
with capital R
so this.router.navigate
should also be with capital R
this.router.navigate(['/RelationshipInfo']);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments