After using
this.router.navigate(['newcard']);This is how I am redirecting from the showcard component to the newcard component:
<a href="#" class="btn btn-primary" (click)="onCreateNew()">
<i class="bi bi-plus"></i>
</a>
onCreateNew(){
this.router.navigate(['newcard']);
}
The newcard component was generated by running ng generate component newcard.
Here is the content of my app-routing.module.ts file:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewcardComponent } from './newcard/newcard.component';
import { ShowcardsComponent } from './showcards/showcards.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{path: 'newcard', component:NewcardComponent},
{path: '', component:ShowcardsComponent},
{path: '**', component: PageNotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: false })],
exports: [RouterModule]
})
export class AppRoutingModule { }
Additionally, here is my app.module.ts file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
import { NewcardComponent } from './newcard/newcard.component';
import { ShowcardsComponent } from './showcards/showcards.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
@NgModule({
declarations: [
AppComponent,
NewcardComponent,
ShowcardsComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }