Question 421645 in Html Question posted in
Some basic documentation can be found here.

Html – 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search