CODEWITHSUNDEEP
angular
Fatih Ersoy
Fatih Ersoy

Reputation: 739

Router element displays twice

After I got confused I tried to write a simple routing exercise. When I implement my code with I see that there're 2 buttons even if I don't have buttons in my router elements. But when I implement without router outlet I see proper 1 button on the screen.

Here's my sample;

app.component.html:

<div>
  <button type="button" class="btn btn-outline-secondary"><a
      routerLink="./elements"
      routerLinkActive="active">Table</a></button>
</div>

<router-outlet></router-outlet>

app.routing-mdule.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { Element2Component } from './element2/element2.component';
const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      { path: 'elements', component: Element2Component },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

element2.component.html:

<p>element2 works!</p>

As a deeper explanation; when I try just this on my app.component.html:

<div>
  <button type="button" class="btn btn-outline-secondary"><a
      routerLink="./elements"
      routerLinkActive="active">Table</a></button>
</div>

I see one button. Also just when I apply just router-outlet I see only "elements works!" as expected. But when I try to implement those 2 together I see 2 buttons and "elements works!". Why don't I see just 1 button and "elements works!" on the screen?

Any help would be appreciated.

Upvotes: 2

Views: 991

Answers (1)

anncb
anncb

Reputation: 131

Your button is showing twice because I suppose that the AppComponent is your root component (and is always there) and also you having it as the default path "" too. So your component is loaded twice !

So here, use another component than AppComponent in your default path; don't reuse it :)

Upvotes: 4

Related Questions