Html – Bootstrap Collapsed Navbar Toggle Button is not working

<div class="container-header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
            aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" [routerLink]="['/home']" routerLinkActive="active">
                <img src="/assets/images/Logo.png" class="img-logo">
            </a>
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" [routerLink]="['/home']" routerLinkActive="active">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" [routerLink]="['/eventi']" routerLinkActive="active">Eventi</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" (click)="userArea()">Sezione Admin</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

.container-header {
    height: 100%;
    display: flex;
    flex-direction: row;

    .bg-dark {
        width: 100%;

        .nav-link {
            border: 1px solid red;
            color: white;
            border-radius: 9px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .nav-link.active {
            border: 1px solid rgb(255, 255, 255);
            color: white;
            border-radius: 9px;
        }
    }

    .navbar-brand {
        img {
            aspect-ratio: 1/1;
            height: 5rem;
        }
    }
}

I’m working on a project in angular and I installed bootstrap. Everything is working as I’m importing bootstrap components just fine. The main issue though, is that when I’m switiching to a smartphone view and the toggle button for the navbar shows up, it doesn’t do anything when I click on it.
I’ve checked other solution on here but nothing fixes this

<div class="main-container">
    <div class="header-container">
        <app-header></app-header>
    </div>
    <div class="page-container">
        <div class="router-container">
            <router-outlet></router-outlet>
        </div>
    </div>

The header is inside the app component so it appears in every page automatically. Here is the css:

.main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;

    .header-container {
        height: 8%;
        width: 100%;
        color: white;
        text-align: center;
    }

    .page-container {
        flex: 1;
        width: 100%;
        overflow: auto;

        .router-container {
            text-align: justify;
            height: 100%;
        }
    }
}

Here is an example of a page that has this issue:

<div class="home-container">
    <div class="home">
        <div class="home-title">
            TITLE
        </div>
        <div class="home-banner">
            <div class="banner-text">

.home-container {
    display: flex;
    flex-direction: column;
    width: 100%;

    .home {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;

        .home-title {
            font-size: 32px;
            font-weight: 600;
            font-family: General;
            font-weight: semibold;
            height: 20%;

            @media (max-width: 768px) {
                font-size: 24px;
            }
        }

        .home-banner {
            margin-top: 15px;
            width: 70%;
            height: 16rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            border: 2px solid #9E0B0F;
            background-image: url('../../../../public/assets/images/banner.jpg');
            background-size: cover;

            @media (max-width: 768px) {
                width: 90%;
                height: 12rem;
            }

            .banner-text {
                padding: 20px;
                font-size: 22px;
                font-weight: 400;
                color: rgb(255, 255, 255);
                font-family: General;
                width: 90%;
                height: 80%;
                align-content: center;
                background: rgba(161, 157, 157, 0.15);
                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px);
                border-radius: 10px;

                @media (max-width: 768px) {
                    font-size: 14px;
                    padding: 8px;
                }
            }
        }