Remove Header and Footer from any page where we don't need

Question

I have created Routes in Module.ts const routes: Routes = [ { path: "" , children: [ { path: "" , component: HomeComponent }, { path: "contact" , component: ContactComponent }, { path: "support" , component: SupportComponent }, { path: "event" , component: EventComponent }, { path: "what-we-do" , component: WhatWeDoComponent }, //{ path: "school-adds", component: SchoolAddsComponent }, ], component: HomeComponent}, // not found handler { path: "school-adds" , component: SchoolAddsComponent }, { path: "**" , redirectTo: "/" , pathMatch: "full" }, ]; please tell me any best way to hide header and footer

Bhairab Dutt · Answer

Hi , First you will create 2 component , one for Header and another for Footer with html and some selector now where you add the router aoutlet you will add both component as : In the above for each component , The application will show header and component. Now, You can add any boolean variable in the component where you didnt want the Header footer and then add as : Hope its help to you . Please accepts the ans if its help. Thanks

Vinod Kakade · Answer

// Try this const routes: Routes = [ { path: '', children: [ { path: '', component: HomeComponent }, { path: "contact", component: ContactComponent }, { path: "support", component: SupportComponent }, { path: "event", component: EventComponent }, { path: "what-we-do", component: WhatWeDoComponent }, ] component: HomeComponent }, { path: "school-adds", component: SchoolAddsComponent }, { path: '**', redirectTo: '' } ];