angular pro navbar collapse function

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: angular pro navbar collapse function

nelsfoltz pro asked 6 years ago

I'm using the latest version of angular pro. What is the name of the function being called on navbar hamburger that toggles the collapse and expand animation?

I've read the documentation for a responsive navbar collapse and it won't work in my situation as I am just doing a single page scroll and not using router. I can't locate the function being called to toggle the nabar collapse/expand state but can simply call if from the nav-links if you provide the function name.

thanks!

Nelson

Damian Gemza staff answered 6 years ago

Dear nelsfoltz, You have to add Angular identifiers ( # sign ) to every link on which click you want to hide navbar. Also there's need to be some (click) listeners to perform function call, and then in your typescript file you have to add @ViewChild(NavbarComponent) link: NavbarComponent; And on every click, you have to call this.link.hide() method. Here's the code with which you'll be able to reproduce hiding navbar after click without using routerLink directive. html: 
<!--Navbar-->

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

<mdb-navbar-brand>

<a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>MDB</strong></a>

</mdb-navbar-brand>

<links>

<ul class="navbar-nav mr-auto">

<li class="nav-item active waves-light"mdbWavesEffect>

<a class="nav-link"href="#section1" #hide (click)="hideNav()">Home <spanclass="sr-only">(current)</span></a>

</li>

<li class="nav-item waves-light"mdbWavesEffect>

<a class="nav-link"href="#section1" #hide (click)="hideNav()">Link</a>

</li>

<li class="nav-item waves-light"mdbWavesEffect>

<a class="nav-link" href="#section1" #hide (click)="hideNav()">Profile</a>

</li>

</ul>

<form class="form-inline waves-light"mdbWavesEffect>

<div class="md-form mt-0">

<input class="form-control mr-sm-2"type="text"placeholder="Search"aria-label="Search">

</div>

</form>

</links>

</mdb-navbar>
ts: 
@ViewChild(NavbarComponent) link: NavbarComponent;

hideNav() {

this.link.hide();

}
Best Regards, Damian

nelsfoltz pro commented 6 years ago

Thanks for the quick response Damian! What do I need to import into the navbar component so that it recognizes "this.link.hide"? That seems to be throwing the error shown below. ERROR in src/app/navbar/navbar.component.ts(11,15): error TS2339: Property 'hide' does not existon type 'NavbarComponent'.

Arkadiusz Idzikowski staff answered 6 years ago

Dear nelsfoltz, Please add this code to your ts file: 
import { NavbarComponent } from 'ng-uikit-pro-standard';
@ViewChild('link') link: NavbarComponent;
and then in your template add reference variable 'link' to the mdb-navbar element:
<mdb-navbar #link SideClass="navbar navbar-1 navbar-light grey lighten-5 fixed-top scrolling-navbar" [containerInside]="false">
Regards,
Arek

nelsfoltz pro commented 6 years ago

Thanks so much Arek, that did the trick!

nelsfoltz pro answered 6 years ago

Still getting an error and not getting the collapse. There's something dumb that I'm missing in the syntax. Any idea what it would be? Here's the navbar ts, navbar html, and console error message.   ts
import { Component, OnInit, ViewChild } from '@angular/core';
 
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
 
@ViewChild(NavbarComponent) link: NavbarComponent;
 
hide: any;
 
hideNav() {
 
this.link.hide();
 
}
}
 
html
<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-1 navbar-light grey lighten-5 fixed-top scrolling-navbar" [containerInside]="false">
 
<!-- Navbar brand -->
<mdb-navbar-brand[ngx-scroll-to]="'#home'"[ngx-scroll-to-offset]="-50"><aclass="navbar-brand"href="#home">Bernhard Edmaier</a></mdb-navbar-brand>
 
<!-- Collapsible content -->
<links>
<!-- Links -->
<ulclass="navbar-nav mr-auto">
<liclass="nav-item active"[ngx-scroll-to]="'#gallery-one'"[ngx-scroll-to-offset]="-200"mdbWavesEffect>
<aclass="nav-link waves-light"href="#gallery-one"#hide(click)="hideNav()">Gallery One<spanclass="sr-only">(current)</span></a>
</li>
<liclass="nav-item"[ngx-scroll-to]="'#books'"[ngx-scroll-to-offset]="-65"mdbWavesEffect>
<aclass="nav-link waves-light"href="#books"#hide(click)="hideNav()">Books</a>
</li>
<liclass="nav-item"[ngx-scroll-to]="'#exhibitions'"[ngx-scroll-to-offset]="-65"mdbWavesEffect>
<aclass="nav-link waves-light"href="#exhibitions"#hide(click)="hideNav()">Exhibitions</a>
</li>
<liclass="nav-item"[ngx-scroll-to]="'#gallery-two'"[ngx-scroll-to-offset]="-65"mdbWavesEffect>
<aclass="nav-link waves-light"href="#gallery-two"#hide(click)="hideNav()">Gallery Two</a>
</li>
<liclass="nav-item"[ngx-scroll-to]="'#about'"[ngx-scroll-to-offset]="-45"mdbWavesEffect>
<aclass="nav-link waves-light"href="#about"#hide(click)="hideNav()">About</a>
</li>
</ul>
<!-- Links -->
</links>
<!-- Collapsible content -->
 
</mdb-navbar>
<!--/.Navbar-->
error
ERROR TypeError: Cannot read property 'hide' of undefined at NavbarComponent.push../src/app/navbar/navbar.component.ts.NavbarComponent.hideNav (navbar.component.ts:16) at Object.eval [as handleEvent] (NavbarComponent.html:18) at handleEvent (core.js:10050) at callWithDebugContext (core.js:11143) at Object.debugHandleEvent [as handleEvent] (core.js:10846) at dispatchEvent (core.js:7509) at core.js:7953 at HTMLAnchorElement.<anonymous> (platform-browser.js:1140) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3748)
View_NavbarComponent_0 @ NavbarComponent.html:18
proxyClass @ compiler.js:10058
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11105
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1670
dispatchEvent @ core.js:7513
(anonymous) @ core.js:7953
(anonymous) @ platform-browser.js:1140
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3748
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback

Damian Gemza staff answered 6 years ago

Dear nelsfoltz, You're not importing NavbarComponent from angular-bootstrap-md (if you're free) or from ng-uikit-pro-standard (if you're pro). If you'll import it, everything should be fine. Best Regards, Damian

nelsfoltz pro commented 6 years ago

Thanks Damian, really appreciate the help!
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
nelsfoltz
Pro User
10Support score
1Questions 1Answers
0Snippets likes 0Snippets