import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { NavComponent } from './nav/nav.component';
import { AddstockComponent } from './addstock/addstock.component';
import { DeletestockComponent } from './deletestock/deletestock.component';
import { EditstockComponent } from './editstock/editstock.component';
import { UserdetailsComponent } from './userdetails/userdetails.component';
const appRoutes: Routes = [
{path: '', component:MainComponent},
{path: 'addstock', component:AddstockComponent},
{path: 'deletestock', component:DeletestockComponent},
{path: 'editstock', component:EditstockComponent},
{path: 'user/:id', component:UserdetailsComponent}
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
MainComponent,
NavComponent,
AddstockComponent,
DeletestockComponent,
EditstockComponent,
UserdetailsComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<div class="container">
<a href="#" class="nav-link" routerLink="/"><button class="btn btn-success">Home</button></a>
<a href="#" class="nav-link" routerLink="/addstock"><button class="btn btn-success">Add New Stock</button></a>
</div>
<app-header></app-header>
<app-nav></app-nav>
<router-outlet></router-outlet>
<app-userdetails></app-userdetails>