Put fixed navbar and sidebar in all components of Angular app - html

Question

So, I am new to angular and building a new angular app which will consist of multiple components and I want the navbar and sidebar to be fixed on all components of my app.
I built navbar and sidebar as separate components. I want the navbar and sidebar to be like this, with the app content(all the component content) being in the white part of the screen:
I know the navbar can be easily imported with html like <navbarComponent><navbarComponent>, but the sidebar is a bit problematic to me since I want the app-content to be on the right of the sidebar component, so the only solution I know is to make a container in css like this:
random-component-html:
<app-navigation-bar></app-navigation-bar>
<div class="d-flex container1">
<div class="al-left">
<app-sidenav-bar></app-sidenav-bar>
</div>
<div class="al-right">
<div class="container">
<h2>Apps:</h2>
<mat-nav-list>
<mat-list-item *ngFor="let app of apps" (click)="redirect(app)">
<button mat-icon-button> {{app.name}}
</button>
</mat-list-item>
</mat-nav-list>
</div>
</div>
</div>
random-component-css:
.container1{
width: 100%;
}
.al-left{
float: left;
max-width: 15vw;
}
.al-right{
float: right;
max-width: 85vw;
}
but I feel that there must be an easier way to do this. Does anybody know a solution?

Answer 1

You can route all your other components within this white block
Lets say:
<app-navigation-bar></app-navigation-bar>
<div class="d-flex container1">
<div class="al-left">
<app-sidenav-bar></app-sidenav-bar>
</div>
<div class="al-right">
<div class="container">
<router-outlet></router-outlet>
</div>
</div>
</div>

Answer 2

You can add your header(navbar), sidebar, footer component in your app.component.html
<app-header></app-header>
<app-sidebar></app-sidebar>
<app-footer></app-footer>
<router-outlet></router-outlet>
You can also add footer as well as shown in above example.
And header sidebar & footer will remain in all the rest of the components.