Using generic typescript instead of #-Links wth angular bootstrap

Question

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

Naren Murali · Accepted Answer · 2025-01-14 02:23:18Z

1

The nearest template reference variable is always taken first, so it is ok to have duplicate named template reference variables.

Not related but using this principle, we have ViewChildren and ContentChildren to fetch all the template reference variables with the same name.

    @for(item of items; track $index) {
        <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>
    }

So my point being. It is ok to have identically named template reference variables, provided the relevant one is nearest to the DOM element that uses it.

Stackblitz Demo

answered Jan 14 at 2:23

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

parascus Jan 14 at 7:44

Hello @Naren Murali, thank you for your response and clarification. I think I have to try to get further into ViewChild / ContentChildren - Management. Having several (identical) ngbDropdownMenus can be ignored in general but in my case, they are different (because different dropdowns) and therefore the correct ngbDropdownMenu should be used..

Naren Murali Jan 14 at 9:53

@parascus could you share modify the stackblitz to replicate your scenario, because as you see, there should be no problems using the same template reference variable in html multiple times

parascus · Accepted Answer · 2025-01-14 12:41:23Z

Hello and many thanks to Naren Murali,

he is right... there is no problem. It seems that the scope is doing its job perfectly. I modified the code for having three different toggle buttons. The code is now like this:

@for(item of items; track $index) {
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button
    type="button"
    class="btn btn-outline-primary me-2"
    id="item.id"
    ngbDropdownAnchor
    (focus)="myDrop.open()"
  >
    {{item.name}}
  </button>
  <div ngbDropdownMenu aria-labelledby="dropdownManual">
    @for(option of item.options; track option ) {
    <button ngbDropdownItem>{{option}}</button>
    }
  </div>
</div>
}

and

import { Component } from '@angular/core';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-dropdown-basic',
  imports: [NgbDropdownModule],
  templateUrl: './dropdown-basic.html',
})
export class NgbdDropdownBasic {
  items = [
    {
      id: 1,
      name: 'First Drop',
      key: 'FD',
      options: ['Alpha', 'Beta', 'Gamma'],
    },
    {
      id: 2,
      name: 'Second Drop',
      key: 'SD',
      options: ['Elefant', 'Lion', 'Hyena'],
    },
    { id: 3, name: 'Third Drop', key: 'TD', options: ['red', 'green', 'blue'] },
  ];
}

The result is, having three buttons where each has it's own drop down, filled with the button specific sub buttons.

Collectives™ on Stack Overflow

Using generic typescript instead of #-Links wth angular bootstrap

2 Answers 2

Stackblitz Demo

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related