I am encountering issues with the ng-bootstrap drop down menu not functioning properly when used in conjunction with *ng

The dropdown menu is designed to dynamically populate a selection of languages. I attempted to use ngFor to achieve this, but only the first item in the list appears in the dropdown menu.

<nav class ="navbar navbar-light bg-light fixed-top">
  <div *ngIf="data.enableLanguageList && data.languageList?.length > 0" class="row">
    <div ngbDropdown class="col d-inline-block">
      <button ngbDropdownToggle 
              class="btn btn-success btn-lg dropdown-toggle" 
              id="languageSelect">
        <strong> Lang - {{ data.currentLanguage }} </strong>
      </button>
      <div ngbDropdownMenu 
           *ngFor="let lang of data.languageList;" 
            class="dropdown-menu" 
            aria-labelledby="languageSelect">
        <button ngbDropdownItem 
                class="dropdown-item" 
                [ngClass] = "[lang === data.currentLanguage ? 'active' : '']" 
                (click) = "setLanguage(lang)">
             <h5> <strong> {{ lang }} </strong> </h5>
        </button>
      </div>
    </div>
  </div>
</nav>

Answer №1

When implementing ngFor on ngbDropdownMenu, make sure to create multiple instances of ngbDropdownItem within a loop.

      <div ngbDropdownMenu 
            class="dropdown-menu" 
            aria-labelledby="languageSelect">
        <button ngbDropdownItem 
                *ngFor="let lang of data.languageList;" 
                class="dropdown-item" 
                [ngClass] = "[lang === data.currentLanguage ? 'active' : '']" 
                (click) = "setLanguage(lang)">
             {{ lang }}
        </button>
      </div>

Answer №2

ul and li tags can be utilized to implement the ngbDropdown functionality.

<div ngbDropdown class="dropdown">
<button ngbDropdownToggle  type="button" class="btn btn-secondary dropdown-toggle" 
    id="dropdownMenuButton" aria-expanded="false">
    Project A
</button>
<ul ngbDropdownMenu aria-labelledby="dropdownMenuButton" >
    <li *ngFor = "let lang of data.languageList">
        <a class="ngbDropdownItem" href="#" style="all:unset">{{lang}}</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

Angular Binding issue - Unable to bind to 'ngModel' as it is not recognized as a valid property of 'input' element, despite the property being present

I have developed a component class like the one below and I am attempting to link the class fields to the template, but encountered the following error: ERROR in src/app/admin/projects/projects.component.html: 41:34 - error NG8002: Can't bind to &ap ...

In Java using Selenium, I am able to retrieve the text of an element but experiencing difficulty clicking on its link

I am encountering difficulties with clicking on a link within a webpage using the Selenium webdriver on Firefox. Below is a snippet of the code related to the issue: WebElement option = driver.findElement(By.id("AccNumSpan" + i)); if(opt ...

Uploading files with Angular 4 and Rails 5 using paperclip

I am currently engaged in a project that involves an Angular 4 frontend and a Rails 5 API backend. I'm facing an issue with uploading videos using paperclip, as they are not getting saved to the database for some unknown reason. Despite all the parame ...

Bootstrap Containers Misaligned

I have been developing a website with two containers, one on the left and one on the right. By executing the following HTML code, you can see the structure: <!DOCTYPE html> <html lang="en"> <head> <link rel=& ...

The AJAX success function is operational, yet the file does not execute

As a newcomer to StackOverflow and web development, I am pressed for time with this assignment, so please bear with me if I struggle with understanding web development terminologies. My current challenge involves calling another php file through ajax in my ...

Utilize JQuery's appendTo() method along with html() function for seamless content replacement

I have a question about appending and replacing div elements. I am currently using the following code: $('.toggle_questions').appendTo('#'+sectionId).show(); While this works perfectly to append my div with the class .toggle_questions ...

I'm having trouble getting the new Angular @if template syntax to function properly in my web application

Can anyone provide assistance? I'm encountering an issue with the new Angular @if template syntax in my angular webapp. It appears that the syntax is not being recognized as valid. Here's an example: https://i.sstatic.net/2PKXHoM6.png If anyon ...

Combine observables from an id using rxjs in Angular with Firestore

In my Firestore database, I have stored information about people and their pets. Each pet is linked to its owner through an owner ID. // Collection / DocumentID: {data} persons / 'person1': { name: 'Romea' } persons / 'person2&ap ...

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...

Browser inconsistencies result in varying appearance of Bootstrap selection in Firefox and Chrome

Issue with Bootstrap select rendering in Firefox and Chrome: Firefox: https://i.sstatic.net/HWEcR.png Chrome: https://i.sstatic.net/GBuDP.png Looking for ways to make the two browsers render consistently, preferably in Chrome's style. This questio ...

Angular universal server-side rendering is functional on my local machine, however, it is encountering issues when

I've been delving into Angular Universal with nestjs. Everything seems to be running smoothly on my localhost at port 4000, but once I deploy the build on Netlify, the site functions properly except for Angular Universal. On my local machine, I use n ...

Select: Exchange icon when clicked

UPDATE MENU ICON jsfiddle.net/a3MKG/83/ Can someone provide guidance on how to change the menu icon image upon clicking it? I would like the icon to switch to a different image (such as an X) once it has been clicked. Please Note: When the menu icon is c ...

Discovering the proper method to reach the parent element in jQuery while within the click event

How can I use jQuery to access the parent element within a click event? $(document).ready(function () { $(".lv1 li").click(function (event) { this.parentElement.parentElement.textContent = this.textContent; $.ajax({ type: 'post&apo ...

What is the best way to incorporate Form Projection into Angular?

I have been attempting to incorporate form projection in Angular, inspired by Kara Erickson's presentation at Angular Connect in 2017, but I am encountering difficulties and errors along the way. view talk here The code provided in the slides is inco ...

Which should I use - Angular directive or CSS selector, for better performance?

Currently expanding my knowledge on angular and exploring the capabilities of the ngClass directive. I have come across this interesting functionality: <li ng-repeat="language in languages" ng-class="{line:$even}">{{language}}</li> Alternativ ...

How to execute a java class method within a JSP page

Is there a way to trigger a specific Java method when I click a button on a JSP page? I attempted using a scriptlet in the onclick event of the button to create an instance of the class and call the desired method, but unfortunately, it didn't yield t ...

What is the best way to display images when a single element in a list created by ngFor is hovered over in Angular 2

displayStar(val) { this.starDisplayed = true; } <ul class="listboxtickets"> <li class="selectlistticket" *ngFor="let item of ticketList" (mouseover)="displayStar(item.id)" (mouseleave)="hideStars()"> <div class="ticket ...

Angular CLI build/serve/test commands task problem matcher in VS Code

In an attempt to set up VS code tasks for Angular CLI commands such as 'ng build', 'ng serve', and 'ng test', I want to generate a list of problems that can be easily navigated when running a CLI command. Currently, I execute ...

Animating Text with CSS for Different Message Lengths

I have been exploring alternatives to the marquee tag and discovered a way to achieve this through CSS. However, the messages I am working with vary in length. Is there an alternative to setting the '45s' attribute to maybe 100% so that regardles ...

Display a div with a link button when hovering over an image

Currently, I'm attempting to display a link button within a div that will redirect the user to a specified link upon clicking. Unfortunately, my current implementation is not functioning as expected. I have provided the code below for reference - plea ...