Issues arise when attempting to toggle the Angular Bootstrap 4 navbar, along with challenges related to the navbar-dark feature

Whenever I attempt to click the hamburger icon to toggle the navigation on a small screen width, nothing happens. I've tried looking for solutions in previous questions, but I can't seem to find where my error lies.

Moreover, when I remove the navbar-dark class, the hamburger disappears completely. Adding this class back changes the color of the navbar to white, which is not the desired effect.

<nav class="navbar navbar-dark navbar-expand-lg">
  <div class="container-fluid px-0">
    <div class="row w-100">
      <div class="col-2">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>

      <div class="col-10">
        <div class="collapse justify-content-end navbar-collapse" id="navbarTogglerDemo03">
          <ul class="navbar-nav mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Book Me</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>


Angular.json:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "node_modules/aos/dist/aos.css"
            ],
            "scripts": [
              "node_modules/popper.js/dist/popper.min.js",
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],

Package.json:

"dependencies": {
    "@angular/animations": "^7.2.11",
    "@angular/cdk": "^7.3.6",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "~7.2.0",
    "@angular/material": "^7.3.6",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "aos": "^2.3.4",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "firebase": "^5.8.5",
    "jquery": "^3.3.1",
    "ng-recaptcha": "^4.2.1",
    "popper.js": "^1.14.7",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
htmlcssangulartwitter-bootstrapbootstrap-4

Answer №1

Here are a couple of issues that need to be addressed:

  1. Make sure to install bootstrap for angular 6+ following the instructions here
  2. Add the bg-dark class to the <nav> element
  3. Refer to this example to see how bootstrap behaves in angular

Check out the working code here

HTML

<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
  <div class="container-fluid px-0">
    <div class="row w-100">
      <div class="col-2">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" (click)="isShown = !isShown" >
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>

      <div class="col-10">
        <div class="collapse justify-content-end navbar-collapse" [ngClass]="{ 'show': isShown }" id="navbarTogglerDemo03">
          <ul class="navbar-nav mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#" (click)="isShown = false" >Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" (click)="isShown = false" >About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" (click)="isShown = false" >Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" (click)="isShown = false" >Book Me</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

TS

isShown:boolean=false;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sticky CSS - A guide to making aside elements fill the entire available height

How can I create a grid layout where the aside is sticky to top: 0 and fills all remaining height (e.g. 100% of height), but when scrolling down, the aside height should be changed to 100% minus the footer's height? Is it possible to achieve this with ...

csscss-positionsticky

Angular material chips showcase a row of five chips

I am working with the basic mat-chips from angular material and I want to arrange them in rows of five without increasing their size: Chip1 Chip2 Chip3 Chip4 Chip5 ..................(space left) Chip6 Chip7 Chip8 Chip9 Chip10 ...............(space le ...

htmlcssangularflexboxangular-material

Troubleshooting JavaScript's onchange Function Dysfunction

Here is the code snippet I am working with: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-2.2.1.min.js"></script> <script src="slike.js"></script> ...

javascriptjqueryhtml

Validate account existence in Angular 2 before account creation

I am currently subscribing to the following event list and attempting to implement additional checks before completion. userService.createUser(this.form).subscribe((user)=>{ this.user = user }) Here is the service method in question: createAccount(us ...

javascriptangular

Concealing Contact Form Using Javascript

Upon making adjustments to a website, I encountered an issue with the contact form. The form is meant to be hidden on page load and only appear when the envelope icon is clicked. However, currently the form is visible by default, and clicking the envelope ...

javascriptjqueryhtml

Exploring the usage of intervalTimer with async and fakeAsync functions

In a particular section of the Angular Testing Guide, it discusses how to test components with asynchronous services, pointing out that: When writing test functions involving done rather than async and fakeAsync, it may be more cumbersome but remains a ...

angulartypescriptjasmine

Converting data received from the server into a typescript type within an Angular Service

Received an array of Event type from the server. public int Id { get; set; } public string Name { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } For Angular and TypeScript, I need to transform it into the following clas ...

c#angulartypescriptrxjs

When sending data from Angular to the server, the request body appears to be blank

To transfer data from the client side (using Angular) to a Node.js server, I have set up a service in Angular. export class AddTaskService { constructor(private http: HttpClient) { } url = 'http://localhost:3000/tasks'; posttasks(task) { ...

node.jsangularexpressbody-parser

Converting a row in a table to a button using Bootstrap

I'm trying to figure out how to turn a table row into a button that can use the data-target attribute to control a carousel. Ideally, I want each row to trigger the carousel to display a different image. Any help with this would be greatly appreciated ...

twitter-bootstrapbootstrap-4

Navigate to another HTML division using data-toggle

I have 2 HTML documents index.html and services.html In services.html, I have the following code: <a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a> <a class="nav-link" data-bs- ...

javascripthtmlcssbootstrap-4bootstrap-5

What is the term for the blue highlighted word that assists in completing the form?

I have been curious about the implementation and name of this feature. I attempted to search online but couldn't find a specific designation. An instance can be seen on the Airbnb website AirBnB Website It involves entering a city and seeing suggest ...

javascripthtmlcss

Integrate the dForm plugin with a convenient time picker widget

Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...

javascriptjqueryhtmlcssjquery-plugins

presentation banner that doesn't rely on flash technology

Looking to create a dynamic slideshow banner for my website inspired by the design on play.com. This banner will feature 5 different slides that transition automatically after a set time, while also allowing users to manually navigate using numbered button ...

phpjavascripthtmlcssajax

I'm looking for a way to display the value stored in a variable within an ejs template. Any suggestions

I am experiencing an issue with my ejs template that should greet the user by displaying their name when the page loads, but it is not showing anything. Here's a snippet of my template: <!DOCTYPE html> <html> <head> < ...

htmlexpressejs

Stretching background images on iOS mobile devices

My background is causing issues on iOS devices by stretching only when there is content added to a page like this. However, it loads correctly on empty pages like this. I have tried adding background-attachment:scroll instead of background-size: cover to ...

ioscssimagemobilebackground

Incorporating Past Projects into an Angular 2 Website

Some time ago, I built a Javascript game utilizing the HTML canvas element for image rendering. Now that I have a personal website created with Angular 2, I am unsure of how to properly embed my game into my site. Due to Angular 2 removing the script tag ...

javascripthtmlangularwebhtml5-canvas

Notifying Subscribed Angular8 Components Based on Logical Conditions with Observables Inside Services

I provide a service that offers a function returning an Observable. Within this service, I have certain logic that should trigger a new call on the Observable to update the data for subscribed components. While I can use next within the Observer construct ...

angular

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

javascriptjqueryhtmlcss

Strategies for transferring user input data to a function in view.py

Purpose: ** The goal is to pass the input value itemnumbervalue to the function itemnumber() in views.py > Issue encountered: The method object is not subscriptable at line 17 in view.py Attempted solutions: Case 1: Tried using both [] and () bra ...

htmldjangodjango-formsdjango-viewsdjango-templates

What is the method for changing the language of column names in a grid by simply clicking a button?

Greetings Everyone, I'm fairly new to angularjs and I'm seeking guidance on how to translate column names into another language on a grid by clicking a button. While I've managed to retrieve column names in English, I am unsure about how to ...

angularangular-translate