Angular navigation bar dropdown menu is not displaying properly

Check out this Bootstrap Navbar

I recently added the same code to my Angular project, but I'm having trouble getting the dropdown to display properly.

Take a look at the Stackblitz Demo

I need help with two things:

  1. Getting the dropdown to show correctly.

  2. In the original code, the dropdown items were hardcoded.

    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

I've now created an array in the component ts file.

    this.items = [
      {name: 'Action', url: 'app/aaa'},
      {name: 'Another Action', url: 'app/bbb'},
      {name: 'Something else here', url: 'app/ccc'}
    ];

I want to use *NgFor to iterate through the array instead of hardcoding. How can I modify the HTML?

htmlcssangulartwitter-bootstrapnavbar

Answer №1

According to the documentation, in order to fully utilize Bootstrap, you need to include certain dependencies. To add the libraries required by Bootstrap, you can insert script tags into your index.html file. Place them at the end of the body.

<my-app>loading</my-app>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

To loop through the items declared in the component, you can utilize *ngFor as shown below:

<a class="dropdown-item" *ngFor="let item of items; let i = index" [href]="item.url">{{item.name}}</a>

View the Demo

If you prefer not to use jQuery: - you will need to create the logic that handles the action when the toggle is clicked.

Here is an example demonstrating how to implement the logic for toggling a dropdown menu.

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

I am facing difficulties accessing an element within a controller in Angular

Struggling to access an element inside an AngularJS controller, I attempted the following: var imageInput = document.getElementById("myImage"); Unfortunately, this approach was unsuccessful as the element returned null. Curiously, when placing the statem ...

javascripthtmlangularjs

Tips for displaying images dynamically in HTML using AngularJS

src={{logo}} var logo = 'localhost:3000/modules/images/default.png' I'm trying to display the image path dynamically, but it's not showing up in the HTML. Do I need to use quotes for src? Can someone please assist me with this issue? ...

javascripthtmlangularjssrc

To access a form element in JavaScript function, utilize the dynamic form name approach

Currently, I am facing an issue with a JavaScript alert function where I am trying to view the HTML form URL before it is submitted. Following advice from a post on StackOverflow about retrieving form submit content before submit, I attempted to implement ...

javascriptjqueryhtmlformsfunction

Why is my element still occupying space even though it has been hidden with a display of none?

Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the sc ...

javascripthtmlcssresponsive-design

Issues with Datepicker functionality in Bootstrap 5 are causing it to malfunction or not display

I am having trouble incorporating a timepicker on my webpage with bootstrap 5. The calendar feature isn't loading properly, preventing me from selecting any dates. I'm unsure if the issue lies with an error on my end or if the plugin isn't c ...

javascripthtmltwitter-bootstrapbootstrap-5

Focus on targeting dynamic IDs such as #event_rules_attributes_0_interval, #event_rules_attributes_1_interval, etc. using CSS3 styling

Styling input tags using their IDs can be very convenient due to the higher precedence weight they hold compared to classes. For instance, I set a default width for input.text elements within a specific container: .details .metadata input.text { width: 2 ...

csscss-selectors

Is it possible to generate HTML form fields with fixed positions when using Orbeon forms?

Is there a way in Orbeon forms to position input fields at specific coordinates, relative to a background image? I currently have a paper form that fills an entire page. My goal is to use the scanned image of this form as a background and then overlay inp ...

javascripthtmlformsorbeon

Unable to retrieve a boolean with the statement "return of(false)"

My objective is to retrieve data, store it, and return either true or false based on the operation outcome. Initially, I attempted to make the call and then use return of(true) to create an observable. The method I have is as follows. setValidations(): Ob ...

angulartypescriptrxjsobservable

What is the best way to design a Global Navigation menu for websites?

For example, I am looking to integrate a Navigation menu into my website using just one file. I have considered using PHP or creating an HTML frame, but I am wondering what the current industry standard is for professionals. Any insights? ...

javascriptjqueryhtmlcssnode.js

When trying to access a view through a controller, the CSS is failing to apply properly

I'm having issues with CSS not working in my Codeigniter project, even when using the base_url() function. < link href="< ? php echo base_url(); ?> application/views/vehicle/css/bootstrap.min.css" rel="stylesheet" media="screen" /> ...

csscodeigniterbase-url

A step-by-step guide on utilizing Angular4 to set focus based on element id

Just diving into Angular and attempting to apply focus on an input element with the id "input1". Here's the code snippet I'm utilizing: @ViewChild('input1') inputEl: ElementRef; Then at a later stage in the component: this.inputEl.na ...

angularangular-forms

Adjust the position of an element based on changes in window size using jQuery

Wondering if this question is unique, as I've spent quite some time searching for a solution to this issue without any luck. Perhaps my search criteria aren't correct. I have a navigation bar that becomes fixed when it reaches the top of the vie ...

javascriptjqueryhtml

OAuth2 Authorization Code flow with client secret confidentiality protection

Recently, I created a demonstration on the Authorization Code flow of OAuth2 using Spring Security Cloud in conjunction with an Angular 2 client. Thus far, everything is functioning correctly as I am receiving the access token response from the server. I ...

angularspring-securityoauth-2.0spring-security-oauth2spring-cloud-security

Selecting radio buttons dynamically in an Angular application

Having trouble dynamically selecting radio buttons? Take a look at the code snippet and visit this unique link. It seems that the button is always checked, but you need it to toggle on click. How can we achieve this functionality? example.component.ts sel ...

angularangular-material

Ensuring a full height div using CSS

I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/ The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not ...

csshtml

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...

javascriptcssreactjssass

Error: The Class 'Subject<T>' does not properly extend the base class 'Observable<T>'

I encountered an error that says: **Build:Class 'Subject<T>' incorrectly extends base class 'Observable<T>** . I have TypeScript 2.4.1 installed and obtained angular quick starter files from the GitHub repository angular quick ...

angulartypescript

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Seeking advice on troubleshooting a CSS keyframes animation issue. I have created an animation with 5 frames where the background image fades and transitions to the next image smoothly in all cycles, except for the first cycle where it glitches before each ...

htmlcssbackgroundcss-animationskeyframe

Having trouble getting CSS styles to work properly in conjunction with Javascript code

Currently, I am developing a feature on a canvas that covers the entire webpage's width and length. In this canvas, I have the ability to create boxes by clicking down anywhere on the canvas, dragging my mouse in any direction, and upon releasing the ...

javascriptcsseventscanvasmouse

What is the most efficient way to implement hiding/showing elements, adding/removing classes, and optimizing code in jQuery?

Looking for a more elegant solution to toggle classes on a div when clicking a button? Current code logic: jQuery(document).ready(function($) { // Removing/adding classes to show/hide div elements on button click // More efficient w ...

javascriptjqueryhtml