Having issues with ngx-Bootstrap 4 dropdown and navbar functionality in Angular 7

I've been attempting to integrate Bootstrap 4 into my Angular 7 project, but I'm facing issues where the styles seem to be overridden by Bootstrap styles. The navigation bar and dropdown box also don't seem to function properly.

To add Bootstrap to my Angular 7 project, I followed the steps outlined in this guide. In the angular.json file, I included the following code:

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

You can view the code on StackBlitz that demonstrates the issue here.

In contrast, a simple jQuery Bootstrap example works as expected, showcasing how Bootstrap functions without the Angular integration.

angulartypescriptbootstrap-4angular7ngx-bootstrap

Answer №1

It seems that some adjustments are required in your code for it to function properly... specifically, the addition of dropdown, dropdownToggle, and *dropdownMenu

Make sure to review the revised/functional app.component.html:

<div class="container">
<hello name="{{ name }}"></hello>
<p>
  Start editing to witness the magic happen :)
</p>

<button type="button" class="btn btn-primary">Primary</button>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown" dropdown>
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" dropdownToggle>
        Dropdown link
      </a>
      <div class="dropdown-menu" *dropdownMenu>
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

<div class="dropdown" dropdown>
  <button class="btn btn-primary dropdown-toggle" type="button" dropdownToggle >Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu" *dropdownMenu>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
</div>

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

The Angular Material Table is not showing any data on the screen

My challenge is to consolidate data from 4 different endpoints in order to generate a ListElement that will populate an angular material table. Despite receiving the correct data in my logs, the table remains empty. Interestingly, when I include a conditio ...

angulartypescriptangular-materialangular-material-table

What is the best way to find out if multiples of a specific time interval can evenly divide the time between two

I'm currently utilizing Luxon for handling dates and durations. I have two specific dates and an ISO duration, and I am looking to figure out how to determine if the interval between the dates is a multiple of the specified duration without any remain ...

javascripttypescriptdatetimeluxon

Tips for updating querystring parameters in the new Angular2 router

Within my component, there is a Google Map feature. When a user adjusts the center of the map, I automatically update the URL to include the new lat-long coordinates so that users can easily share the specific map view. Here is an example of the URL format ...

angularangular2-routing

Encountering a fresh issue after updating to TS version 4.4.3 while accessing properties of the top "Object may be 'null'."

After upgrading my project to TypeScript 4.4.3 from 3.9.9, I encountered a change in the type declarations for the top property. My project utilizes "strictNullChecks": true, in its configuration file tsconfig.json, and is browser-based rather t ...

javascripttypescript

In Typescript, it mandates that a string value must be one of the values within the object

There is a constant declaration mentioned below: export const Actions = { VIEW: 'view', EDIT: 'edit', }; Imagine there's a function like this: // Ensuring that the action variable below is always a string with value either ...

typescript

How can I access Angular in the console through devtools on Angular 8?

I'm currently using Angular 8 and I came across this outdated advice on how to test an AngularJS service from the console on Stack Overflow. Despite following the steps mentioned, I encountered some disappointing output. Angular is running in the dev ...

angularconsolegoogle-chrome-devtoolsangular8

Getting started with creating a dynamically changing table with just 2 initial rows is easier than you

My challenge is to dynamically create rows in a table, but I am unsure how to start the table with two rows on the onInit event. To get an idea of how the table operates, you can view it here: Visit stackblitz ...

angular

I am experiencing issues with my bootstrap file not working despite providing the correct file path. The styles are not being applied on my webpage

The file path is provided below <link rel="stylesheet" href="../css/bootstrap.min.css"> I have exhausted all options in an attempt to resolve the issue. The browser console indicates a 404 error (err_abborted) ...

phphtmlcssbootstrap-4

Clear navigation bar on top of a backdrop picture

I am currently exploring the most effective method to place my hero/background image behind a transparent Bootstrap 4 navbar. Some have suggested applying the background image to the body of the page, but I specifically want the background image only on th ...

cssbootstrap-4

What is the method for handling an array in Angular when all of them are successfully passed?

tasks: [ {failed: true, remarks: "",task: {'name': 'task1'}}, {failed: true, remarks: "",task: {'name': 'task2'}}, ] Is there a way to determine the overall status of all tasks based on their suc ...

javascripttypescript

Running a method at any given time within an ngFor loop in Angular 5

On my angular page, I am facing a challenge with updating a variable and displaying it in the HTML within an *ngFor loop. Here is an example of what I need: HTML: <table *ngFor="let data of Dataset"> somehowRunThis(data) <div>{{meth ...

htmlangulartypescript

What is the best way to utilize Typescript when making queries to Firebase?

I have successfully integrated push notifications for my app using Firebase Cloud Functions. Now, I am looking to enhance the user experience by updating the app's badge count alongside the push notifications. I understand that this can only be achiev ...

javascripttypescriptgoogle-cloud-functions

I am curious if there exists a VSCode plugin or IDE that has the ability to show the dependencies of TypeScript functions or provide a visual representation

Are there any VSCode plugins or IDEs available that can display the dependency of TypeScript functions or show a call stack view? I am looking for a way to visualize the call stack view of TypeScript functions. Is there a tool that can help with this? Fo ...

javascripttypescriptvisual-studio-codeidewebstorm

Creating global variables in NodeJS allows you to access and modify data

Currently, this construct is being utilized to create a global LOG: declare global { let LOG: Logger; } // eslint-disable-next-line @typescript-eslint/no-namespace declare namespace globalThis { let LOG: Logger; } globalThis.LOG = new Logger(); It f ...

typescript

How to initiate animation in Angular2 from a parent component

I am currently working on implementing an animation for a hidden element within a child component. The goal is to have the animation play when the element is displayed, as well as whenever a user clicks on a button in the parent component. Below is the si ...

animationangularangular2-animation

What triggers the appearance of the message "Error: Uncaught (in promise): Response with status:200 for Url:null"?

My current setup involves accessing a Mongo database using NodeJS and Express in the following way: var MongoClient = require('mongodb').MongoClient; ... app.get("/app/visits", function (req, res, next) { console.log(" ...

javascriptnode.jsangularnativescript

Bootstrap fails to load after deployment, yet functions perfectly on localhost

Encountering issues where the website only shows a blank screen, but it functions perfectly when in localhost. Using Firefox dev tools, I inspected for errors and found a 500 Internal Server Error message. The problematic site is located at It is expecte ...

phpjquerysqlbootstrap-4

Ensuring that Vue3 Typescript app focuses on input element within Bootstrap modal upon opening

I am facing a challenge with setting the focus on a specific text input element within a modal dialog. I have tried various methods but none seem to achieve the desired outcome. Here is what I have attempted: Attempt 1: Using autofocus attribute. <inpu ...

typescripttwitter-bootstrapvue.js

Initialization issue detected in Angular's module APP_INITIALIZER

In my auth module, I have implemented a mechanism to import and set up MSAL configuration before initializing the app. I am using APP_INITIALIZER to delay the initialization of the app until the configuration for MSAL-ANGULAR is retrieved. The issue I am f ...

angularazure-ad-msalmsal-angular

Anticipating the information that I will retrieve from the server

Greetings to all! I am still new here, so please bear with me if my layout is not up to par. I have a reactive form where I submit data to the server (mongodb database). After that, I aim to redirect to a new path while passing along the ID element provid ...

javascriptangularmongodbasynchronous