in angular 7 i have define different component app folder and define component in route is well when i definde router name in url it,s work fine show me that component which is attached to that url but when i define that rout name in anchor tag click on anchor it,s not working here is my html code
<li class="nav-item">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item @@about">
<a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item @@blog">
<a class="nav-link" routerLink="/blog">BLOG</a>
</li>
this is my router
const routes: Routes = [{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{
path: 'blog',
component: BlogComponent
},
];
If your anchor tag is not becoming blue that means routerLink is not binded with anchor tag. It is because you have not imported RouterModule
.
Note : You have to import RouterModule
in the the module where you have declared this component where you are adding routerLink
and not in the app.module.ts
.
For example : if you have home.component.ts
in home.module.ts
and you want to use <a [routerLink]="[/student]"></a>
in home.component.html
then add RouterModule
in home.module.ts
import {RouterModule} from '@angular/router';
@NgModule(
{
...
import:[
...
RouterModule
...
]
...
}
)