Best method to set different layout for different pages in angular 4

Question

I am new to angular 4. What I\'m trying to achieve is to set different layout headers and footers for different pages in my app. I have three different cases:

Answer 1

There are cases where the layout and shared elements don't really match the routing structure, or some elements have to be hidden/shown depending on a per-route basis. For such cases I can think of the following strategies (let's take an example of app-header-main component - but it will apply to any shared page element obviously):

Inputs & css classes

You can provide inputs or css classes to control the inner appearance of your shared elements, such as:

or

2. and then use :host(.no-user-tools) to show/hide what needs to be

or

3. at a route level (child or not):

   {
     path: 'home',
     component: HomeComponent,
     data: {
       header: {showUserTools: true},
     },
   },
   

And access it through ActivatedRoute like so: this.route.data.header.showUserTools

TemplateRef input

Inside app-header-main component:

@Input() rightSide: TemplateRef;

Input of type TemplateRef where you could feed an ng-template element directly

your content here

Named slot transclusion

You can author the app-header-main so that it uses named slot transclusion

Inside of app-header-main template:

Usage:

  
your content here