Sharing layout to all components from app component #238

New Issue

fergalmoran · 2025-08-09T17:15:31Z

fergalmoran commented

2025-08-09 17:15:31 +00:00

Originally created by @christiankaseburg on 1/9/2018

The last couple days I have cleaning up my code, in my project, and I have been trying to find a better solution to sharing my layout with my components compared to my hack.

Problem:
Currently my app.component.html consists of all my components that build my layout. For example, it contains shared-header, router-outlet, and shared-footer. My router outlet displays each of my components for each page by adding my components name to a tag below the router outlet in the DOM and nesting the components html into the tag. When I try to add my flex styling to my app component the flex does not apply to the components. I want to style my layout in my app component because the app components html loads my other components, and my hack putting my flex layout in my sites css does not follow the components design pattern and I want to find a better solution. My goal is to be able to style my flex layout for all my components in my app component. I want to be able to have my footer stay fixed on the bottom, and the component my router outlet loads fill up the rest of the screen by creating a layout that can be shared to my other components from my app component. If you have any ideas, solutions, or info worth reading about this I am very interested.

Also using :host pseudo selector to access the host element of the component does not work, and seem redundant to add to all the components style just to follow the layout.

The html of my app component:

<shared-header></shared-header>
<router-outlet></router-outlet>
//page components loaded here I.E, <home>, <portfolio>, <blog>
<shared-header></shared-footerr>

*Originally created by @christiankaseburg on 1/9/2018* The last couple days I have cleaning up my code, in my project, and I have been trying to find a better solution to sharing my layout with my components compared to my hack. Problem: Currently my app.component.html consists of all my components that build my layout. For example, it contains shared-header, router-outlet, and shared-footer. My router outlet displays each of my components for each page by adding my components name to a tag below the router outlet in the DOM and nesting the components html into the tag. When I try to add my flex styling to my app component the flex does not apply to the components. I want to style my layout in my app component because the app components html loads my other components, and my hack putting my flex layout in my sites css does not follow the components design pattern and I want to find a better solution. My goal is to be able to style my flex layout for all my components in my app component. I want to be able to have my footer stay fixed on the bottom, and the component my router outlet loads fill up the rest of the screen by creating a layout that can be shared to my other components from my app component. If you have any ideas, solutions, or info worth reading about this I am very interested. Also using :host pseudo selector to access the host element of the component does not work, and seem redundant to add to all the components style just to follow the layout. The html of my app component: ``` <shared-header></shared-header> <router-outlet></router-outlet> //page components loaded here I.E, <home>, <portfolio>, <blog> <shared-header></shared-footerr> ```

fergalmoran closed this issue

2025-08-09 17:15:31 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#238