Html Question posted in
Some basic documentation can be found here.

Html – Angular Navbar Component gets looped

Im building an Angular application and my navbar gets looped.
My problem is, that if I am on /home, the navbar.component.html components gets looped and i see 2 among each other. How can I solve this

import {Routes} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {AdminComponent} from "./admin/admin.component";

export const routes: Routes = [
  {path: 'home', title: 'Home', component: HomeComponent},
  {path: 'admin', title: 'Admin', component: AdminComponent},
  {path: '**', redirectTo: 'home'},
];

app.modules.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {NavbarComponent} from "./navbar/navbar.component";
import {AdminComponent} from "./admin/admin.component";
import {RouterLink, RouterModule, RouterOutlet} from "@angular/router";

@NgModule({
  declarations: [AdminComponent, NavbarComponent],
  imports: [CommonModule, RouterLink, RouterOutlet, RouterModule],
  exports: [AdminComponent, NavbarComponent, CommonModule, RouterLink, RouterOutlet, RouterModule]
})
export class AppModule {
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ui</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-home></app-home>
<router-outlet></router-outlet>
</body>
</html>

home.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

navbar.component.html

<nav>
  <ul>
    <li><a routerLink="/home" >Home</a></li>
    <li><a routerLink="/news">News</a></li>
    <li><a routerLink="/contact">Contact</a></li>
    <li><a routerLink="/about">About</a></li>
    <li><a routerLink="/admin">Admin</a></li>
  </ul>
</nav>

I tried changing the router outlet many times and changing where I use which component but I cant bring it to work.

Tags:

Please signup or login to give your own answer.

Back To Top
Search