Collapse not working in Angular navbar for mobile - html

Question

I have an Angular project without Jquery.
I want to have a navbar with mdbootstrap, But when I write mdbootstrap code in my html, collapse does not work.
Here is my html content.
<header>
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>

Answer 1

The documentation is not very user-friendly, but still goes over the basic navbar... the classes use tell it when to move from hanburger menu to expanded form (navbar-expand-lg in our case); the rest is just dummy text in the example below.
relevant HTML:
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark pink ie-nav" [containerInside]="false">
<mdb-navbar-brand>
<a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
</mdb-navbar-brand>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item active waves-light" mdbWavesEffect>
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">Features</a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">Opinions</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link"><mdb-icon fab icon="facebook-f"></mdb-icon></a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link"><mdb-icon fab icon="twitter"></mdb-icon></a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link"><mdb-icon fab icon="instagram"></mdb-icon></a>
</li>
</ul>
</links>
</mdb-navbar>
relevant CSS:
.navbar-toggler-icon{ border:2px solid red;}
.navbar-brand, .nav-link{color:red !important;}
complete working stackblitz here

Answer 2

I'm posting the best way using Angular Material library to make sidenav as main nav of your application. You no need to install any other librarys then Angular Material
npm i --save #angular/material #angular/cdk #angular/animations
ng add #angular/material
Here is a code: https://stackblitz.com/edit/angular-c8gpuh
Here is an video tutorial: https://www.youtube.com/watch?v=Q6qhzG7mObU
And in your app.component.html:
<sidenav-autosize-example>
<router-outlet></router-outlet>
</sidenav-autosize-example>
And remember to import nessesery modules to your project:
import { NgModule } from '#angular/core';
import { MatSidenavModule, MatToolbarModule, MatButtonModule, MatIconModule, MatProgressBarModule } from '#angular/material';
#NgModule({
declarations: [],
imports: [
MatSidenavModule,
// MatToolbarModule,
MatButtonModule,
MatIconModule,
// MatProgressBarModule,
],
exports: [
MatSidenavModule,
// MatToolbarModule,
MatButtonModule,
MatIconModule,
// MatProgressBarModule,
],
})
export class MaterialModule { }