Using Typescript to collapse the Bootstrap navbar through programming

Question

Using Typescript to collapse the Bootstrap navbar through programming

I've managed to make Bootstrap's navbar collapse successfully using the data-toggle and data-target attributes on each li element.

If you're interested, here is a SO answer that explains a way to achieve this without modifying every single li:

Below is a snippet of my navbar code featuring two of the li elements:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
      <a class="nav-link" href="#" routerLink="/servers">Servers</a>
    </li>
    <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
      <a class="nav-link" href="#" routerLink="/servers">Variables</a>
    </li>

I'm getting close to implementing this functionality in my Angular 8 Typescript file:

export class AppComponent implements OnInit {
  ngOnInit(): void {
    const navbarItems = document.querySelectorAll('.navbar-nav>li');
    navbarItems.forEach(navbarItem => {
      navbarItem.addEventListener('click', () => {
        const navbar = document.querySelector('.navbar-collapse').collapse('hide');
      })
    });
  }
}

The problem lies in the last line:

Property collapse does not exist on type element.

What steps should I take to fix this issue? Additionally, are there any alternative methods that could work better?

I have attempted to cast navbar as various HTML element types, but none of them seem to resolve the problem.

javascript angular twitter-bootstrap typescript

Answer 1

Answer №1

You have the option to approach it in a more Angular-oriented manner. Take a look at this example:

<button class="navbar-toggler" type="button" (click)="showMenu=!showMenu">
    <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" [ngClass]="{'show':showMenu}">
     ...
 </div>

Answer 2

You have the option to approach it in a more Angular-oriented manner. Take a look at this example:

<button class="navbar-toggler" type="button" (click)="showMenu=!showMenu">
    <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" [ngClass]="{'show':showMenu}">
     ...
 </div>

Answer 3

Answer №2

After some experimentation, I managed to achieve functionality by excluding 'show' from the list of classes, as illustrated in the final line.

(Although I'm uncertain about the effectiveness of this method, it is producing the desired results.)

public class AppComponent implements OnInit {
  ngOnInit(): void {
    const navbarItems = document.querySelectorAll('.navbar-nav li');
    navbarItems.forEach(navbarItem => {
      navbarItem.addEventListener('click', () => {
        const navbar = document.querySelector('.navbar-collapse');
        navbar.classList.remove('show');
      })
    });
  }
}

Answer 4

After some experimentation, I managed to achieve functionality by excluding 'show' from the list of classes, as illustrated in the final line.

(Although I'm uncertain about the effectiveness of this method, it is producing the desired results.)

public class AppComponent implements OnInit {
  ngOnInit(): void {
    const navbarItems = document.querySelectorAll('.navbar-nav li');
    navbarItems.forEach(navbarItem => {
      navbarItem.addEventListener('click', () => {
        const navbar = document.querySelector('.navbar-collapse');
        navbar.classList.remove('show');
      })
    });
  }
}

Using Typescript to collapse the Bootstrap navbar through programming

Answer №1

Answer №2

Similar questions

store JSON data within an HTML list element

When dynamically accessed, the property of a JSON object is considered "undefined"

Retrieve the values of two inputs from outside of the event

View a specific selected newsAPI article on its own dedicated page

Retrieving data from an array using an AJAX request function

Utilizing Loopback Callbacks within a Looping Structure

Using scrollIntoView() in combination with Angular Material's Mat-Menu-Item does not produce the desired result

Error: The function Task.find is not recognized in Node.js

The type unknown[] cannot be assigned to type React.ReactNode

"Debugging a simple demonstration showcasing NodeJS, AngularJS, and Express

What is the most effective method for delivering npm packages using django?

modifying the child divs contained in the main div

The error message "TypeError: self.parent.parent.context.parseInt is not a function" indicates that

Calculating the total of all values in a table

Tips for Effectively Declaring a Variable with React's useState

Is there a mistake in how I am creating this TypeScript object?

Activate a jQuery plugin on elements that are dynamically generated

Determine the image's position in relation to its parent element while factoring in any vertical offset

Utilizing the Redux Connect HOC's wrapped component type in React.RefObject without the need for re-importing

Obtain the dynamic identifier of an element within every block using jQuery in a rails application