CODEWITHSUNDEEP
angulartypescript
senjust
senjust

Reputation: 119

How to change content with <router-outlet> on non-main page?

I need to have header, footer and home-news-page when I go to my homepage. And so when I click on the some link on my header, the home-news-page has changed. My routing now looks like this:

const ROUTES: Routes = [
{
  path: '', component: HomeComponent, children: [
    { path: '/sign-up', component: SignUpComponent },
    { path: '/sign-in', component: SignInComponent },
  ]
},
{ path: '404', component: Page404Component },

{ path: '**', redirectTo: '404'},
];

In the html of my app.component, I only have a routing-outlet. My home-page looks like this:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

header and footer are displayed, and when I click on a link, the content is redrawn as needed. But by default, the component HomeNewsComponent should be preferred and I do not know how to do it. I understand that this should be done in routing.module. I tried somehow as path: '', component: HomeNewsComponent, but then I only show the news without header and footer. I would be very grateful if someone tells me how to solve this problem.

Upvotes: 0

Views: 1658

Answers (2)

senjust
senjust

Reputation: 119

I solved my problem, I should write like this:

const ROUTES: Routes = [
{
path: '', component: HomeComponent, children: [
    { path: '', component: HomeNewsComponent },
    { path: 'sign-up', component: SignUpComponent },
    { path: 'sign-in', component: SignInComponent },
  ]
  },
  { path: PAGE_404, component: Page404Component },

  { path: '**', redirectTo: PAGE_404 },
];

Thank you to all who responded !!!

Upvotes: 1

Rogelio
Rogelio

Reputation: 1094

in your HomeComponent this should be in it instead of your app component. 

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

for your app component you can just have your home component

<app-home></app-home>

Upvotes: 0

Related Questions