Issue
I am starting to learn angular just now. I want to create two routes, on clicking one link it should go to that component. If I go http://localhost:4200/dep i get the emp list's html. But on the main page none of it is showing up. Links are also not getting displayed 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 { DepListComponent } from './dep-list/dep-list.component';
import { EmpListComponent } from './emp-list/emp-list.component';
@NgModule({
declarations: [
AppComponent,
DepListComponent,
EmpListComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<!DOCTYPE html>
<head>
<h1>navigate</h1>
<body>
hdwiqhkac
<div>
<a routerLink="dep">
department
</a>
<a routerLink="emp">emp</a>
</div>
</body>
</head>
<!-- <AppComponent></AppComponent> -->
<router-outlet></router-outlet>
app-routing-module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DepListComponent } from './dep-list/dep-list.component';
import { EmpListComponent } from './emp-list/emp-list.component';
const routes: Routes = [
{path:"dep", component:DepListComponent},
{path:"emp", component:EmpListComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
``
Solution
Your app.component.html file should be like
app.component.html
<header>
<a routerLink="/dep">
department
</a>
<a routerLink="/emp">emp</a>
</header>
<router-outlet></router-outlet>
app-routing.module.ts
const routes: Routes = [
{path:"", component:DepListComponent},
{path:"/dep", component:DepListComponent},
{path:"/emp", component:EmpListComponent}
];
EDIT 1
Added working stackblitz edit link
Answered By - Alaksandar Jesus Gene
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.