Using generic typescript instead of #-Links wth angular bootstrap

I'm interested in using bootstrap for ui development. But I'm not sure if, what I try to do is achievable. Imagine that I want wanting some Dropdowns Like this one of the bootstrap examples:

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button
type="button"
class="btn btn-outline-primary me-2"
id="dropdownManual"
ngbDropdownAnchor
(focus)="myDrop.open()"
>
Toggle dropdown
</button>
<div ngbDropdownMenu aria-labelledby="dropdownManual">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>


The dropdown itself has a name "myDrop" that is declared with a hashtag. But I'd like to read all necessary dropdowns from a database table and create them in a @for loop. In this case I can't modify the hashtags.

Is there any way to give the dropdown a name that can be used to access the dropdown via typescript (like (focus)="myDrop.open()" shown above)?

Best regards

Parascus

Continue reading...