Currently, I am attempting to integrate a dropdown feature into a div element. The HTML code for the dropdown is generated dynamically within the code. When clicking on the dropdown button, it appears functional but unfortunately, the dropdown itself does not work as expected. Below is an excerpt from my component file:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@ViewChild('showfilters') el:ElementRef;
this.el.nativeElement.innerHTML = this.el.nativeElement.innerHTML + `
<div class="dropdown " dropdown>
<a class="dropdown-toggle text-light" dropdownToggle> New Dropdown</a>
<div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
<a class="dropdown-item"> Profile</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a></div>
</div>
`;
The HTML snippet:
<div class="showfilters" #showfilters>For further reference and demonstration, you may view the example I created on StackBlitz.