How to render a component without rendering AppComponent at all times?

0

Issue

I want to render 2 components (AppComponent and UserComponent) without having to render AppComponent at all times. Here’s what my code looks like:

app.routing.module.ts

const routes: Routes = [
  {
    path: '', component: AppComponent
  },
  {
    path: 'user', component: UserComponent
  }
];

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

app.component.html

<div>
 I'm in the app component
</div>
<router-outlet></router-outlet>

Now for some reason "I’m in the app component" text is rendered 2 times as you can see in the picture:

enter image description here

Now when I go to route ‘/user’ I see this:

enter image description here

so my question is How can I only see "I’m in the app component" text when on on ‘/’ route and
when I’m on ‘/user’ route only see "user works!"? Thanks a lot in advance!

Solution

AppComponent renders by default as its the root component. You would need to create another component and use that as your home component. Please check the updated stackblitz.

Answered By – Faisal Mehboob

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More