Bootstrap Collapsed Navbar Toggle Button is not working (angular)

<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;
}
}
}

Continue reading...