2021-12-01

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

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!



from Recent Questions - Stack Overflow https://ift.tt/3d64eCe
https://ift.tt/3ob4Vk9

No comments:

Post a Comment