What causes Bootstrap 4 elements to initiate a full reload of an Angular 7 application?

Question

What causes Bootstrap 4 elements to initiate a full reload of an Angular 7 application?

Currently, I am utilizing bootstrap 4 and angular 7 in my project. The element below is responsible for toggling the visibility of a sidebar:

<a
  class="app-sidebar__toggle"
  href="#"
  data-toggle="sidebar"
  aria-label="Hide Sidebar"
></a>

The issue arises when I access a specific route, causing a full page reload. Here are the routes defined in app-routing.module.ts:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'catalogo/lista', component: CatalogoListaComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

If I navigate to http://localhost:4200/home, the error occurs. However, if I visit any other route (with the default empty route redirecting to /home), e.g., http://localhost:4200 or http://localhost:4200/a_route_that_not_exists, I get redirected to /home as expected, and the sidebar show/hide button functions correctly.

I hope this explanation clarifies my predicament, and your assistance would be greatly appreciated.

EDIT: Further code snippets from my application...

This snippet shows 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>

Below is my header.component.html (includes the link for toggling 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>

Lastly, here's the content of 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>

css angular web bootstrap-4

Answer 1

Answer №1

When it comes to integrating Popper/ JS elements from Bootstrap into Angular, there are some challenges; however, Angular offers a reliable way to manage elements like sidenavs.

If the element responsible for toggling the sidenav is not in the same component as the sidenav itself, you can create a basic service to handle the state of the sidenav. To set up your sidenav service (execute this command in your project root using the console):

ng g s sidenav

In the generated sidenav.service.ts file, include the following:

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, adjust 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, define the toggleSidebar() method to call the toggle() function from the service you just created:

import {SidenavService} from "[location of your service]";


@Component({ /*...*/ })
export class HeaderComponent {

  constructor(private sidenavService: SidenavService)

  toggleSidebar(): void {
    this.sidenavService.toggle();
  }

}

You can then implement the reaction to the toggle (either in your app component or sidebar component):

//assuming you're in sidebar.component.ts
import {SidenavService} from "[location of your service]";
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 utilize the isOpen variable in your sidebar component in various ways to control the sidebar's behavior. For instance, you can use an [ngClass] directive:

<!--in your header component-->
<header [ngClass]={'active': isOpen, 'inactive': !isOpen} >
</header>

Alternatively, you can incorporate angular animations to animate the sidebar in and out (using ngIf and the :enter/ :leave transitions).

Answer 2

When it comes to integrating Popper/ JS elements from Bootstrap into Angular, there are some challenges; however, Angular offers a reliable way to manage elements like sidenavs.

If the element responsible for toggling the sidenav is not in the same component as the sidenav itself, you can create a basic service to handle the state of the sidenav. To set up your sidenav service (execute this command in your project root using the console):

ng g s sidenav

In the generated sidenav.service.ts file, include the following:

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, adjust 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, define the toggleSidebar() method to call the toggle() function from the service you just created:

import {SidenavService} from "[location of your service]";


@Component({ /*...*/ })
export class HeaderComponent {

  constructor(private sidenavService: SidenavService)

  toggleSidebar(): void {
    this.sidenavService.toggle();
  }

}

You can then implement the reaction to the toggle (either in your app component or sidebar component):

//assuming you're in sidebar.component.ts
import {SidenavService} from "[location of your service]";
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 utilize the isOpen variable in your sidebar component in various ways to control the sidebar's behavior. For instance, you can use an [ngClass] directive:

<!--in your header component-->
<header [ngClass]={'active': isOpen, 'inactive': !isOpen} >
</header>

Alternatively, you can incorporate angular animations to animate the sidebar in and out (using ngIf and the :enter/ :leave transitions).

What causes Bootstrap 4 elements to initiate a full reload of an Angular 7 application?

Answer №1

Similar questions

Using Angular 2 to submit ngModel data within an ngFor loop

Using Angular 4 to transfer data from a dynamic modal to a component

Angular 11 with angular-material no longer displays a button ripple effect in the color primary, accent, or warn

Hover without proper anchoring / move to section on click without anchor tag

Visual feedback on Bootstrap button outlines when clicked

Having issues with my *ngFor loop in Angular 11. Any assistance in resolving this problem would be greatly appreciated

Creating a Full Screen Image with HTML and CSS

What is the best way to set up the --public-host for operating an Angular universal app in conjunction with an Ngin

CSS background color using over 20 different shades

Angular failing to recognize the && operator

Ways to create distance between repeated cards in a loop. My method involves utilizing ajax, jquery, and bootstrap

Arrange my Firebase Angular users based on a specific value, encountering an error stating "sort is not a function

Is Node.js and Express.js necessary when utilizing Angular2 in development?

Align the elements of the contact form to the opposite sides

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

Is there a way to implement a JavaScript function that can dynamically update the color scheme and background colors of all HTML pages within my website?

In Chrome, a horizontally floating item is pushed down, whereas in Firefox it remains in place

Utilize Datatables to apply filters dynamically

What is the process of linking a contact form to send an email using Golang?

"Add some pizzazz to your website with Animate.css - Animate your