Why do the Bootstrap 4 elements reload entire Angular 7 application? - css

Question

I am working with bootstrap 4 and angular 7, I have the following element, which function is to hide/show a sidebar.
<a
class="app-sidebar__toggle"
href="#"
data-toggle="sidebar"
aria-label="Hide Sidebar"
></a>
The problem is when I enter to specific route, this reloads all page. These are my routes in app-routing.module.ts
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'catalogo/lista', component: CatalogoListaComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' }
];
So, if I enter to http://localhost:4200/home, the error will happen, but if I enter to any other route (my default empty route will redirect to /home), for example, http://localhost:4200 or http://localhost:4200/a_route_that_not_exists, I am redirected to /home (as expected), and the button that show/hide the sidebar works well.
I hope to be clear in my problem and I would like a lot you can help me.
EDIT: More code of my application...
This is my app.component.html:
<app-header></app-header>
<app-sidebar></app-sidebar>
<div class="app-content">
<app-title [titulo]="titulo" [icono]="icono [breadcrumbs]="breadcrumbs"></app-title>
<router-outlet></router-outlet>
</div>
This is my header.component.html (where I use the link to show/hide the sidebar):
<header class="app-header">
<a class="app-header__logo" href="index.html">Vali</a>
<!-- Sidebar toggle button-->
<a
class="app-sidebar__toggle"
href="#"
data-toggle="sidebar"
aria-label="Hide Sidebar"
></a>
<p>.... more html</p>
</header>
And this is my sidebar.component.html:
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="app-sidebar">
<div class="app-sidebar__user">
<img
class="app-sidebar__user-avatar"
src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/48.jpg"
alt="User Image"
/>
<div>
<p class="app-sidebar__user-name">John Doe</p>
<p class="app-sidebar__user-designation">Frontend Developer</p>
</div>
</div>
<ul class="app-menu">
<li>
<a class="app-menu__item" [routerLink]="['/home']">
<i class="app-menu__icon fa fa-home"></i>
<span class="app-menu__label">Inicio</span>
</a>
</li>
more menu elements...
<ul>
</aside>

Answer 1

Generally a lot of the Popper/ JS elements in Bootstrap won't work out of the box in Angular; Angular provides a pretty solid way to handle elements like sidenavs.
Since the element you want to use to toggle the sidenav doesn't exist in the same component as the sidenav, you can set up a basic service that handles the sidenav state. To create your sidenav service (run in console in your project root):
ng g s sidenav
And then in the generated sidenav.service.ts:
import {Injectable} from '#angular/core';
import {BehaviorSubject} from 'rxjs';
#Injectable()
export class SidenavService {
public isOpen: boolean = false;
public toggleChange: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
constructor() {}
public toggle(): void {
this.isOpen = !this.isOpen;
this.toggleChange.next(this.isOpen);
}
}
In your header.component.html you can modify the clickable element that will show/ hide the sidebar:
<a
class="app-sidebar__toggle"
aria-label="Hide Sidebar"
(click)="toggleSidebar()"
></a>
In your header.component.ts file you can then set toggleSidebar() to run the toggle() function in the service you just set up:
import {SidenavService} from "[wherever your service is located]";
#Component({ /*...*/ })
export class HeaderComponent {
constructor(private sidenavService: SidenavService)
toggleSidebar(): void {
this.sidenavService.toggle();
}
}
You can then (in either your app component or sidebar component) set up reacting to the toggle:
//assuming you're in sidebar.component.ts
import {SidenavService} from "[wherever your service is located]";
import {OnInit, OnDestroy} from "#angular/core";
import {Subscription} from "rxjs";
#Component({ /*...*/ })
export class SidebarComponent implement OnInit, OnDestroy {
isOpen: boolean;
sidenavSubscription: Subscription;
constructor(private sidenavService: SidenavService) {}
ngOnInit() {
this.sidenavSubscription = this.sidenavService.toggleChange.subscribe(isOpenChange => {
this.isOpen = isOpenChange;
});
}
ngOnDestroy() {
this.sidenavSubscription.unsubscribe();
}
}
You can then use the isOpen variable in your sidebar component in different ways to control sidebar activity. Examples include using an [ngClass] directive:
<!--in your header component-->
<header [ngClass]={'active': isOpen, 'inactive': !isOpen} >
</header>
Or you can build in something using angular animations to animate the sidebar in and out (using ngIf and the :enter/ :leave transitions).