Issue
I have an app that has a HomeComponent, where I don't want to show a HeaderComponent. Also, I have other 4 routes where I do want to render the Header. I could made it work, but there is a little bug when I navigate from HomeComponent, to any other component. It doesn't render the HeaderComponent, but when I reload the page on the navigator, it show the header correctly. I tried a lot of things and can't make it work properly yet...
What i want Show HeaderComponent on all routes, except for /home (HomeComponent).
Here is my code app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ContactoComponent } from './contacto/contacto.component';
import { HomeComponent } from './home/home.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { SkillsComponent } from './skills/skills.component';
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
},
{ path: 'about', component: AboutComponent, data: { animation: 'fader' } },
{
path: 'contacto',
component: ContactoComponent,
data: { animation: 'fader' },
},
{ path: '**', redirectTo: '' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
app-module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { CvComponent } from './cv/cv.component';
import { ContactoComponent } from './contacto/contacto.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
HomeComponent,
AboutComponent,
ContactoComponent,
CvComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
NgbModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.html
<app-header *ngIf="router.url !== '/home'"></app-header>
<router-outlet> </router-outlet>
I also tried to call <app-header></app-header>
on top of each template 'about.component.html' and 'contacto.component.html' but I had the same results...
I guess that is trying to show HeaderComponent, but it is not exist until I reload the page. Please can you please help me....?
Solution
You can create a layout component and load your other pages as child route inside layout component and put header inside layout component .
const routes: Routes = [
{path:'home':component : homecomponent}
{
path: ' ',
component: HeaderOnlyLayoutComponent,
children: [
{ path: 'youotherpath', component:
childcomponent },
]
}
]
You can see full description and example here Link
Answered By - Mohammad Babaei
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.