0

i have created component autocomplete and i was using it just fin till i had to user 2 of those component in 1 view, i saw that dropdown in template is referenced to previous instance of my autocomplete component

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styles: []
})
export class AutocompleteComponent implements OnInit, OnChanges {
  delayId;

  @ViewChild('dropdown')
  dropdown;
  @ViewChild('element')
  input;
....
}

and template

<div class="form-group" style="position: relative;">
  <label for="{{buttonId}}">{{buttonCaption}}</label>
  <input #element (keyup)="sendKeyStrokes(element.value)"
         type="text" class="form-control"
         id="{{buttonId}}"
         aria-describedby=""
         placeholder="{{buttonCaption}}">
  <ng-content></ng-content>
  <div #dropdown <-- **this is wrong** class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <span *ngFor="let option of options"
        class="dropdown-item"
        (click)="optionClick(option)">
        {{option.caption}}
      </span>
    </div>
</div>

can i create reference # dynamically ? or someone can point me to right direction

Viszman
  • 1,378
  • 1
  • 17
  • 47
  • 2
    possible duplicate? https://stackoverflow.com/questions/44440879/dynamic-template-reference-variable-inside-ngfor-angular-2 – Qellson Apr 04 '19 at 06:08
  • ok, i found what caused this, and now i'm sure that every component is encapsulated :D the `AutocompleteComponent` is working good i had error in parent component – Viszman Apr 04 '19 at 07:42

0 Answers0