Overview

Prerequisites

1. Create Header

In the terminal (from your project folder) run the following CLI command

ng g c frame/header --module app

This will create a new component in app/frame folder

2. Modify header.component.ts

Replace selector: 'app-header', with this line:

selector: '[app-header]',

3. Create Footer

In the terminal (from your project folder) run the following CLI command

ng g c frame/footer --module app

This will create a new component in app/frame folder

4. Modify footer.component.ts

Replace selector: 'app-footer', with this line:

selector: '[app-footer]',

5. Modify app.component.html

DELETE everything in this file. Replace with these lines: 

<header app-header></header>

<main id='page'>

    <router-outlet></router-outlet>
                          
</main>

<footer app-footer></footer>

Dynamic content (your pages) will be loaded into <router-outlet></router-outlet>

6. Add Styling

Add the following styles: 

body, html {
    min-height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}
    
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

footer {
    margin-top: auto;
}

Modify the html of both Header and Footer components. Templates for navbars can be found here Boostrap 5 Navbars.

7. Add Home Page

In the terminal (from your project folder) run the following CLI command

ng g c pages/home --module app

Modify app-routing.module.ts with the following lines: 

import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        component: HomeComponent
    },
];

8. Serve

In the terminal (from your project folder) run the following CLI command

ng serve --port=4000 --open

Browser will open and you should see something like this:

img