I want to implement something like the following the "right" way in Angular 2:
$('.collapse').hide();
What would be the "Angular 2 way" of doing this? Do I just use native JavaScript? Are there built-in Angular methods I should use?
Edit: Let me add some context for my particular case.
I have a Bootstrap 4 navbar with a collapsible nav. If you pull down the nav, then click a link, the nav doesn't disappear like you would expect it to.
I want it so that when you click any link anywhere, the navbar goes back to its collapsed state.
Here's what my navbar markup looks like:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#foodie-navbar"
aria-controls="foodie-navbar"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" routerLink="/">Foodie</a>
<div class="collapse navbar-collapse" id="foodie-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngIf="auth.authenticated()">
<a class="nav-link" [routerLink]="['/places']">Places</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</a>
<a class="nav-link" routerLink="" (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
Here's what my AppComponent
looks like:
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Auth } from './auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Auth]
})
export class AppComponent {
constructor(private auth: Auth, private router: Router) {
router.events.subscribe(val => {
if (val instanceof NavigationEnd) {
// This is when the hiding should happen.
}
})
}
}
By the way, now that I look a little closer, I see that if I do $('.collapse').hide();
on the console, then click the hamburger menu again, it doesn't work. So maybe I need a different solution altogether.
Edit: Someone marked this question a duplicate of an ng2-bootstrap question. My question/answer don't have anything to do with ng2-bootstrap so I don't believe it's a duplicate.
I was able to achieve what I wanted by triggering a click on the navbar toggle button.
In both pieces of code below, probably the main thing to pay attention to is the collapseNav()
function.
Here's my component code:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Auth } from './auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Auth]
})
export class AppComponent {
@ViewChild('navbarToggler') navbarToggler:ElementRef;
constructor(private auth: Auth) {}
navBarTogglerIsVisible() {
return this.navbarToggler.nativeElement.offsetParent !== null;
}
collapseNav() {
if (this.navBarTogglerIsVisible()) {
this.navbarToggler.nativeElement.click();
}
}
}
And here's my markup.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button #navbarToggler class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#foodie-navbar"
aria-controls="foodie-navbar"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" routerLink="/">Foodie</a>
<div class="collapse navbar-collapse" id="foodie-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngIf="auth.authenticated()">
<a (click)="collapseNav()" class="nav-link" [routerLink]="['/places']">Places</a>
</li>
<li class="nav-item">
<a (click)="collapseNav(); auth.login()" class="nav-link" routerLink="" *ngIf="!auth.authenticated()">Log In</a>
<a (click)="collapseNav(); auth.logout()" class="nav-link" routerLink="" *ngIf="auth.authenticated()">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
Here's what I did which worked.
Open app.component.ts
Import Router and NavigationEnd:
import { Router, NavigationEnd } from '@angular/router';
Just under the imports insert the following in order to access JQuery:
declare var $: any;
Add the following into the constructor:
private router: Router
In the ngOnInit() add the following:
this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { return; } // Scroll to the top of the page window.scrollTo(0, 0); // This closes the top nav $(document).click((event) => { const click = $(event.target); const _open = $('.navbar-collapse').hasClass('show'); if (_open === true && !click.hasClass('navbar-toggler')) { $('.navbar-toggler').click(); } }); });
I'm using NG 10 with bootstrap 5 but I know it works in previous version of both NG and Bootstrap 4.5.x
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With