Topic: Trouble with double navigation

Ryan Cassar free asked 7 years ago


Hi, I have started a new project and then later added the pro files to it since we upgraded. I'm having trouble adding the double navigation. The top bar is fine but the side nav is not showing. I followed the code that is on your website. Even a copy and paste of the just the code gives me a weird screen. I suspect i either have a file missing from the pro, or i need to import something else. Could you take a look and my angular-cli.json, app.module.ts and the html where i am adding the double navigation.

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "backoffice-web"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../scss/mdb.scss",
        "./styles.scss"
      ],
      "scripts": [
        "../node_modules/web-animations-js/web-animations.min.js",
        "../node_modules/chart.js/dist/chart.js",
        "../node_modules/easy-pie-chart/dist/easypiechart.js",
        "../node_modules/screenfull/dist/screenfull.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

 

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from './typescripts/angular-bootstrap-md/pro';
import { BrowserModule } from '@angular/platform-browser';
import { ROUTER_MODULE } from './app.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// components
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FooterComponent } from './footer/footer.component';
import { SigninComponent } from './signin/signin.component';
import { PagingComponent } from './shared/paging/paging.component';

// services
import { LanguageService } from './shared/language.service';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    FooterComponent,
    SigninComponent,
    PagingComponent
  ],
  imports: [
    BrowserModule,
    ROUTER_MODULE,
    MDBBootstrapModule.forRoot(),
    MDBBootstrapModulePro.forRoot(),
    BrowserAnimationsModule
  ],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [
    LanguageService
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

app.component.html

<!--Double navigation-->
<header>
  <!-- Sidebar navigation -->
  <sidenav #sidenav [fixed]="false" *ngIf="isSignedIn">
    <!-- Side navigation links -->
    <li>
      <ul class="collapsible collapsible-accordion">
        <squeezebox [multiple]="false" aria-multiselectable="false">
          <sb-item>
            <sb-item-head ripple-radius><i class="fa fa-chevron-right"></i> Reference Data</sb-item-head>
            <sb-item-body>
              <ul>
                <li><a href="#" class="waves-effect" ripple-radius>Countries/Cities/States</a></li>
                <li><a href="#" class="waves-effect" ripple-radius>Languages</a></li>
                <li><a href="#" class="waves-effect" ripple-radius>Currencies</a></li>
                <li><a href="#" class="waves-effect" ripple-radius>Sic Codes</a></li>
              </ul>
            </sb-item-body>
          </sb-item>
        </squeezebox>
      </ul>
    </li>
    <!--/. Side navigation links -->
  </sidenav>
  <!--/. Sidebar navigation -->

  <!-- Navbar -->
  <nav class="navbar navbar-toggleable-md navbar-dark bg-primary" *ngIf="isSignedIn">
    <!-- SideNav slide-out button -->
    <a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a>
    <!--/. SideNav slide-out button -->
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapseEx3"
            aria-controls="collapseEx3"
            aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand">
      <strong>Backoffice</strong>
    </a>
    <div class="collapse navbar-collapse" id="collapseEx3">
      <ul class="navbar-nav mr-auto"></ul>
      <form class="form-inline waves-effect waves-light">
        <a class="nav-link">Profile</a>
        <a class="nav-link" (click)="signedIn()">Logout</a>
      </form>
    </div>
  </nav>
  <!--/. Navbar -->

</header>
<!--/.Double navigation-->

<!--Mask-->
<div class="view" [hidden]="isSignedIn">
  <!--Intro content-->
  <div class="full-bg-img flex-center">
    <ul>
      <li>
        <h1 class="h1-responsive">Backoffice</h1>
      </li>
      <li>
        <p>Welcome</p>
      </li>
      <li>
        <button md-ripple type="button" class="btn btn-primary relative" (click)="login.showModal()" ripple-radius>
          Login
        </button>
      </li>
    </ul>
  </div>
  <!--/Intro content-->
</div>
<!--/.Mask-->

<app-home *ngIf="isSignedIn"></app-home>

<app-signin #login></app-signin>

<div class="" [hidden]="true">
  <router-outlet></router-outlet>
</div>

<footer>
  <app-footer></app-footer>
</footer>

Rafał Rogulski free answered 7 years ago


Hi,   When you update MDBootstrap Angular you must update npm package and also typescript, scss, img, and font folder they contain a premium component which can be shared via npm.   All code which you share it looks ok, and work on us quickstart project.   Regards  

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags