Switch the dropdown icon in ng-bootstrap when clicked

Click me to switch icon from fa-angle-up to fa-angle-down.

Initially displaying the fa-angle-up icon, clicking it will change it to fa-angle-down.

<div class="col text-right">
    <div ngbDropdown placement="top-right" class="d-inline-block">
      <div  id="dropdownBasic2" ngbDropdownToggle>
        <i class="fa fa-angle-up fa-5x"></i>
      </div>
      <i class="fa fa-angle-down fa-5x"></i> <!--display this on click-->
      <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
      </div>
    </div>
  </div>
</div>

Answer №1

Utilize a template variable to access the isOpen method, which returns a boolean value. Use this value to dynamically bind a class.

<div class="col text-right">
        <div  #myDrop="ngbDropdown" ngbDropdown placement="top-right" class="d-inline-block">
          <div  id="dropdownBasic2" ngbDropdownToggle>
            <i [ngClass]="Mydrop.isOpen() == true ? 'fa fa-angle-up' : 'fa fa-angle-down'"></i>
          </div>
          <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
            <button class="dropdown-item">Action - 1</button>
            <button class="dropdown-item">Another Action</button>
            <button class="dropdown-item">Something else is here</button>
          </div>
        </div>
      </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

Eliminate repetitive content in CSS document

I recently discovered the SCCS Compiler () and I am impressed with its capabilities. However, I am in need of an additional feature. After generating a compressed CSS file, I noticed the following: html,body{height:100%;}html,body{height:100%;}html,body{ ...

How come the display is not aligned correctly when using display: inline-block along with text?

Could someone explain why a div with display: inline-block aligns differently when there is text or another element inside it? I know that vertical-align can fix this issue, but I'm curious to understand how the browser makes its decision on how to di ...

Angular template-driven forms with a custom validator allows for creating your own validation

Hey StackOverFlow folks, I'm currently facing an issue with a custom validation in template-driven forms. I have a stepper component and a unique form that encapsulates all the groups. For each step, I need the inputs' sum to be 100%, triggering ...

Decorators in Angular 9 do not have the capability to support function expressions

Currently, I am working with Angular 9 and facing an issue while generating dynamic routes values during runtime. I have implemented a ComplexUrlRouter to achieve this functionality and integrated it into my Route configuration. However, I encountered the ...

Modify the css with JQUERY when there are no rows inside the tbody section

Is it possible to change the css using jquery if there are no rows in the table body? I have attempted this but my current approach is not working. I tried adding an alert within the if statement, but the alert did not appear. My goal is to hide the table ...

"Initial loading issue with bootstrap carousel causes slides not to slide smoothly

I am currently working on implementing a slider carousel using Bootstrap. Although the 'active' image loads successfully, the controls and slide functionality are not working as expected. Initially, I believed this exercise would be straightforwa ...

I am having trouble retrieving images from the backend API. Can someone assist me in resolving this issue?

I am facing an issue while trying to upload an image along with its details. I am able to retrieve all the information but the image is not displaying in the browser. My backend API is built using PHP Laravel and the images are stored in the Storage/app/ap ...

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above. Despite spending a few hours searching for solutions online, I have not been able ...

Update each initial .not('class') using Jquery

My attempt at creating a live search with an effect in jQuery is proving to be challenging as I am struggling to capture the first word in the text. I have attempted to wrap each word in a span like this: <span class="word word-this" id="word-#" aria-h ...

What is the best approach to manage dynamic regex values for input types within ngFor loop?

In my project, I have an array of objects containing details for dynamically generating input fields. I have successfully implemented the dynamic input field generation based on the type received from an API. However, I am facing a challenge with matching ...

Obtain data from a local JSON file using the http.get() method in Angular 2

I am attempting to utilize the http.get() method in Angular 2 to load a local JSON file. I followed a suggestion from Stack Overflow that involves modifying my app.module.ts: In this example, I have imported the HttpModule and the JsonModule from @angular ...

Deleting a particular item in Angular involves utilizing specific techniques for removal, while updating a

After connecting my reactive form app with a REST API, I encountered an issue while trying to delete a hotel. Instead of displaying the ID of the clicked hotel, it shows "Really delete the Hotel: (undefined)?" What could be causing this problem in my code ...

What is the best way to repeatedly subscribe to an observable?

Within the ngOnInit() function of my Angular application, I am subscribing to an Observable in the following manner: ngOnInit() { this.loadArtistTable(); } loadArtistTable(): void { this._artistService.getArtists().subscribe( (artistL ...

Organize icons within a container that spans the entire height

I am looking to organize multiple icons within a container that spans the entire height of the website, rather than just the viewport. Currently, I am only able to achieve the height of the viewport using the following code: .full-container { posit ...

Is there a method in CSS Grids to wrap the implicit grid while employing grid-auto-flow: column?

How can I achieve a layout consisting of two 4x2 grids that flow into each other, instead of being positioned side by side? Essentially, I want to split an 8x2 grid into two halves and stack them vertically. Is there a way to make the layout wrap around it ...

Steps for implementing a custom markup trigger with prettyPhoto:

Recently, I encountered an issue with my table view: https://i.sstatic.net/Fji2F.png Upon clicking the td, it should open the PrettyPhoto Lightbox In the default PrettyPhoto setup, the html trigger looks like this: <a href="images/fullscreen/2.jpg" ...

What is the best way to add three dots "..." to a text when chopping it up?

Is there a way to add three dots at the end of the second line of a text without affecting the first line? I found an example on this jsfiddler for one line, but I'm struggling to make it work with two lines. Any suggestions on how to achieve this? h ...

``Implementing a method to save the output of an asynchronous request in a global variable for future manipulation

It's been a week and I still can't figure this out. Being new to front-end development, I'm struggling with storing the response from subscribe in a global variable for future use. ngOnInit(): void { this.http.get<APIResponse>('ur ...

Enhance Your Images: Creating Stunning Colored Overlay Effects using HTML and CSS

I'm currently working on implementing an overlay effect for images on a webpage. The idea is that when the cursor hovers over an image, it will change color slightly. However, I'm facing some issues and the desired effect is not reflecting. How c ...

Instructions for removing a specific row from a table by clicking on the icon or button

Currently in my project, I am utilizing the Table with pagination component. My goal is to implement a feature where users can delete a single row at a time by clicking on the delete icon. To showcase what I have tried so far, I have set up a demonstration ...