angular pro navbar collapse function

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

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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!

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

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!

Add comment

nelsfoltz pro answered 6 years ago

0 0 Best answer

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
<div>
<div>import { Component, OnInit, ViewChild } from '@angular/core';</div>
 
<div>@Component({</div>
<div>selector: 'app-navbar',</div>
<div>templateUrl: './navbar.component.html',</div>
<div>styleUrls: ['./navbar.component.scss']</div>
<div>})</div>
<div>export class NavbarComponent {</div>
 
<div>@ViewChild(NavbarComponent) link: NavbarComponent;</div>
 
<div>hide: any;</div>
 
<div>hideNav() {</div>
 
<div>this.link.hide();</div>
 
<div>}</div>
<div>}</div>

</div>
<div>html</div>
<div></div>
<div>
<div>
<div></div>
<div><mdb-navbar SideClass="navbar navbar-1 navbar-light grey lighten-5 fixed-top scrolling-navbar" [containerInside]="false"></div>
 
<div></div>
<div><mdb-navbar-brand[ngx-scroll-to]="'#home'"[ngx-scroll-to-offset]="-50"><aclass="navbar-brand"href="#home">Bernhard Edmaier</a></mdb-navbar-brand></div>
 
<div></div>
<div><links></div>
<div></div>
<div><ulclass="navbar-nav mr-auto"></div>
<div><liclass="nav-item active"[ngx-scroll-to]="'#gallery-one'"[ngx-scroll-to-offset]="-200"mdbWavesEffect></div>
<div><aclass="nav-link waves-light"href="#gallery-one"#hide(click)="hideNav()">Gallery One<spanclass="sr-only">(current)</span></a></div>
<div></li></div>
<div><liclass="nav-item"[ngx-scroll-to]="'#books'"[ngx-scroll-to-offset]="-65"mdbWavesEffect></div>
<div><aclass="nav-link waves-light"href="#books"#hide(click)="hideNav()">Books</a></div>
<div></li></div>
<div><liclass="nav-item"[ngx-scroll-to]="'#exhibitions'"[ngx-scroll-to-offset]="-65"mdbWavesEffect></div>
<div><aclass="nav-link waves-light"href="#exhibitions"#hide(click)="hideNav()">Exhibitions</a></div>
<div></li></div>
<div><liclass="nav-item"[ngx-scroll-to]="'#gallery-two'"[ngx-scroll-to-offset]="-65"mdbWavesEffect></div>
<div><aclass="nav-link waves-light"href="#gallery-two"#hide(click)="hideNav()">Gallery Two</a></div>
<div></li></div>
<div><liclass="nav-item"[ngx-scroll-to]="'#about'"[ngx-scroll-to-offset]="-45"mdbWavesEffect></div>
<div><aclass="nav-link waves-light"href="#about"#hide(click)="hideNav()">About</a></div>
<div></li></div>
<div></ul></div>
<div></div>
<div></links></div>
<div></div>
 
<div></mdb-navbar></div>
<div></div>
error

</div>
<div><span class="source-code"><span class="console-message-text">ERROR <span class="object-value-error source-code">TypeError: Cannot read property 'hide' of undefined at NavbarComponent.push../src/app/navbar/navbar.component.ts.NavbarComponent.hideNav (<span class="devtools-link">navbar.component.ts:16</span>) at Object.eval [as handleEvent] (<span class="devtools-link">NavbarComponent.html:18</span>) at handleEvent (<span class="devtools-link">core.js:10050</span>) at callWithDebugContext (<span class="devtools-link">core.js:11143</span>) at Object.debugHandleEvent [as handleEvent] (<span class="devtools-link">core.js:10846</span>) at dispatchEvent (<span class="devtools-link">core.js:7509</span>) at <span class="devtools-link">core.js:7953</span> at HTMLAnchorElement.<anonymous> (<span class="devtools-link">platform-browser.js:1140</span>) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (<span class="devtools-link">zone.js:421</span>) at Object.onInvokeTask (<span class="devtools-link">core.js:3748</span>)</span></span></span></div>
<div class="">
<table class="stack-preview-container">
<tbody>
<tr>
<td></td>
<td class="function-name">View_NavbarComponent_0</td>
<td>@</td>
<td><span class="devtools-link">NavbarComponent.html:18</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">proxyClass</td>
<td>@</td>
<td><span class="devtools-link">compiler.js:10058</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError</td>
<td>@</td>
<td><span class="devtools-link">core.js:11105</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError</td>
<td>@</td>
<td><span class="devtools-link">core.js:1670</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">dispatchEvent</td>
<td>@</td>
<td><span class="devtools-link">core.js:7513</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">(anonymous)</td>
<td>@</td>
<td><span class="devtools-link">core.js:7953</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">(anonymous)</td>
<td>@</td>
<td><span class="devtools-link">platform-browser.js:1140</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask</td>
<td>@</td>
<td><span class="devtools-link">zone.js:421</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">onInvokeTask</td>
<td>@</td>
<td><span class="devtools-link">core.js:3748</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask</td>
<td>@</td>
<td><span class="devtools-link">zone.js:420</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">push../node_modules/zone.js/dist/zone.js.Zone.runTask</td>
<td>@</td>
<td><span class="devtools-link">zone.js:188</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask</td>
<td>@</td>
<td><span class="devtools-link">zone.js:496</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">invokeTask</td>
<td>@</td>
<td><span class="devtools-link">zone.js:1540</span></td>
</tr>
<tr>
<td></td>
<td class="function-name">globalZoneAwareCallback</td>
</tr>
</tbody>
</table>
</div>
</div>

Please insert min. 20 characters.

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

<mdb-navbar SideClass="navbar navbar-1 navbar-light grey lighten-5 fixed-top scrolling-navbar" [containerInside]="false">

<mdb-navbar-brand[ngx-scroll-to]="'#home'"[ngx-scroll-to-offset]="-50"><aclass="navbar-brand"href="#home">Bernhard Edmaier</a></mdb-navbar-brand>

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

</mdb-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

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

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:
<div>
<pre>

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

<mdb-navbar-brand>

</mdb-navbar-brand>

<links>

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

</li>

</li>

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

</li>

</ul>

</div>

</form>

</links>

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

hideNav() {

this.link.hide();

}</pre>
</div>
Best Regards,

Damian

Please insert min. 20 characters.

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'.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

nelsfoltz

Pro User 10Support score
1Questions 1Answers 0Snippets