CODEWITHSUNDEEP
htmlangularmdbootstrap
Elham Ajdari
Elham Ajdari

Reputation: 185

Collapse not working in Angular navbar for mobile

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>

Upvotes: 1

Views: 1729

Answers (2)

Mises
Mises

Reputation: 4603

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

Upvotes: 1

Akber Iqbal
Akber Iqbal

Reputation: 15031

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

Upvotes: 1

Related Questions