Utilizing ngx-bootstrap to enhance Bootstrap dropdown functionality

I initially tried to set up ngx-bootstrap in Angular 2 by using the following command: npm install ngx-bootstrap bootstrap --save

Then, I included these lines in angular-cli.json: 

 "../node_modules/bootstrap/dist/css/bootstrap.min.css".

In app.component.html, I added the following code:

  <div  class="dropdown">
     <a class="pull-right text-center btn btn-setting dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"><i class="fa fa-cog"></i></a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation">  <a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-cog"></i>Settings</a></li>
     </ul>                                      
  </div>

Unfortunately, this code is not working for bootstrap dropdown menus. The dropdown menu is not functioning as expected. Please help.

My package.json file includes:

{
 "name": "offline-new",
 "version": "0.0.0",
 "license": "MIT",
 "angular-cli": {},
 "scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
 },
"private": true,
"dependencies": {
   (list of dependencies here)
},
 "devDependencies": {
   (list of devDependencies here)
}
}

Thanks

angulartypescriptngx-bootstrap

Answer №1

Have you made sure to include this code in your app.module.ts file?

import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

Don't forget to update your app.component.html as well:

<div  class="dropdown" dropdown>
    <a dropdownToggle class="pull-right text-center btn btn-setting dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"><i class="fa fa-cog"></i></a>
    <ul *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation">  <a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-cog"></i>Settings</a></li>
    </ul>
</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

Are push notifications supported in Ionic3?

I've been struggling to set up push notifications in my Ionic3 app for the past couple of days, and no matter what I try, it doesn't seem to work due to the current versions I'm using. Here are my current versions: rxjs: 5.5.11 Angular: 5 ...

angulartypescriptionic3

What is the process to generate a universal error page in Angular?

I have implemented a simple example in Angular 6 using a globalErrorHandler for error cases. I have also included a loader that runs after the login operation and before loading data into a table. Everything seems to be working fine, but I have encountered ...

angularangular-http-interceptors

Following the recent update to IntelliJ IDEA 2022.1.3, the use of ::ng-deep has been marked

After updating the version of IntelliJ, I noticed that the ::ng-deep angular material selector is now marked as deprecated. Here's an example: <mat-form-field class="register-custom-select"> <mat-select formControlName="gende ...

cssangularintellij-ideasassangular-material

Tips on how to retrieve an Observable Array instead of a subscription?

Is there a way to modify this forkJoin function so that it returns an observable array instead of a subscription? connect(): Observable<any[]> { this.userId = this.authService.userId; this.habits$ = this.habitService.fetchAllById(this.userId); this.s ...

javascriptarraysangulartypescriptobservable

Having trouble adding npm package to Angular project due to npm error ERESOLVE?

I encountered this error while attempting to install any package with npm. I have attempted to clear the cache and reinstall node itself, but none of these methods have worked. -- Error message D:\Electrolux KB\Electrolux-KnowledgeBase.eg_v2> ...

angularnpmnpm-install

Efficiently linking styles through computation in Angular

So I've been working with Angular5 and I figured out how to bind an HTML element's style to a Boolean value. However, I'm struggling to find a way to do this for multiple styles simultaneously. For example, I have this code snippet that wor ...

htmlcssangular

The functionality of Angular 8 Directives from the shared module is currently malfunctioning

Hey everyone! I've been working on creating a custom directive in Angular 8, but for some reason it's not functioning properly. Even though there are no errors shown in the browser console, I can't see any changes or output from the console. ...

angulartypescriptangular2-directives

Error: Unable to assign the 'schedule' property to a null value

I'm currently developing a scheduling application using React.js and have implemented a draggable scheduling feature for users to indicate their availability. Everything seems to be working smoothly, except for one pesky error message: TypeError: Cann ...

javascriptarraysreactjstypescripttypeerror

XState: linking together multiple promises seamlessly without needing intermediate states

After reading the Invoking Multiple Services section, it seems that despite being able to invoke multiple promises, they appear to be triggered without waiting for the previous one to complete in my own tests. // ... invoke: [ { id: 'service1' ...

javascriptreactjstypescriptxstate

Building a database using a dump.sql file in NodeJS (Express) with the added power of TypeScript

I am currently building an application using Express and TypeScript. While the app is already configured to work with MySQL, I am facing a challenge in figuring out how to create the database based on a dump.sql file. CREATE DATABASE IF NOT EXISTS test; U ...

mysqlnode.jstypescriptexpress

Firebase authentication link for email sign-in in Angularfire is invalid

Currently, I am utilizing the signInWithEmailLink wrapper from AngularFire for Firebase authentication. Despite providing a valid email address and return URL as arguments, an error is being thrown stating "Invalid email link!" without even initiating any ...

angulartypescriptfirebaseangularfire

I've noticed that tailwindcss is causing issues with some of the styles in my angular project

Recently, I integrated tailwindcss 2.0.4 into my angular 11.2.6 project. After completing the installation and adding necessary imports, the appearance of the page had changed. Take this button for instance: Prior to integrating tailwindcss, the button ...

cssangulartailwind-css

Tips on sending a function as a parameter to a TypeScript service

Within my Angular service, I have a method that calls a webapi function: export class FormulasService extends ServiceBase{ constructor(){super();} renameFormula(id:string, name:string):ng.IPromise<any>{ var cmd = {id:id, name:name}; ...

angularjsdelegatestypescriptthis

Utilizing TypeScript to invoke a method via an index signature

Here is a snippet of my code, where I am attempting to call a method using an indexed signature. It functions properly when the function name is manually added, but how can I call it using object notation for dynamic calls? createFormControl(formControls: ...

typescripttypescript-typings

Obtaining user roles from server without using JWT tokens

My main objective is to provide user roles from the backend. For instance, if a user wishes to access resources in my backend, they can log in using Google credentials. The Angular app retrieves the access token from the Google authorization server and s ...

javascriptjavaangularspring-bootsecurity

Learn how to utilize a Library such as 'ngx-doc-viewer2' to preview *.docx and *.xlsx files within the application

After 3 days of searching, I finally found a solution to display my *.docx and *.xlxs files in my angular application. The API returns the files as blobs, so my task was to use that blob to show the file rather than just downloading it using window.open(bl ...

javascriptangulartypescriptblobngx-doc-viewer

Top method for verifying input during keyup or blur events

When it comes to validating user inputs, I often find myself wondering about the best approach to take. In this case, I have created a regex for numbers with decimal points. .ts part checkIsNumber(event) { console.log('event', event.target. ...

javascriptangular

Employing multiple subscriptions within a function

I am facing an issue in my Angular application where I am trying to display a detailed summary of the sales for a specific drink using the DrinkDetailComponent. However, upon initializing the component, only one backend call is being made to retrieve infor ...

angulartypescriptsubscription

The ko.mapping function is throwing an error because it cannot access the property 'fromJS' which is undefined

I am currently exploring typescript and attempting to integrate knockout.mapping into my project, but I'm facing some challenges. Despite installing the necessary libraries for knockout and knockout.mapping, along with their respective "@types" decla ...

typescriptknockout.jsknockout-mapping-pluginlaravel-mix

Resolving parent routes in Angular 2

I am encountering an issue with my code. The 'new' route is a child route for the 'users' route. The 'users' route has a resolver, and everything works fine up to this point. However, after successfully creating a new user, ...

javascriptangular