0

I am Rendering the Below Text boxes Dynamically,I want to open popover for each text box and only one popover should be opened at a time.

enter image description here

This is the markup for rendering the text boxes and the popover

<!-- for rendering dynamic fields -->
<div>
<div *ngFor="let field of fieldsInfo">
<div class="form-group">
   <label class="required" for="field?.FieldName">{{field?.DisplayName}}</label>
   <input [type]="text" [id]="field?.FieldName" class="form-control" [formControlName]="field?.FieldName" [ngModel]="field?.Value" />
   <template #popContent></template>
   <button type="button" id="{{field?.FieldName}}" class="btn btn-secondary" (click)="openPopover(field.FieldName)" [ngbPopover]="field?.FieldName" popoverTitle="Popover" #p="ngbPopover" placement="right" triggers="manual">open
   </button>
 </div>
 </div>
 </div>

This is the typescript code

export class PopoverComponent {

    @ViewChild('p') public popover: NgbPopover;

    openPopover(data: any){
        this.popover.open(data);
    }
    
    }

The issue is when ever i hit any open button, only the popover of the first text box is being displayed and not able to open other popovers , can you tell me what code changes i have to make to make this functionality work

Pein
  • 423
  • 3
  • 11
  • 27
  • hi, have you found out ? We have same issue here. I've found this : http://stackoverflow.com/questions/35257455/ng2-how-to-create-variable-in-ngfor-loop – Stefdelec Apr 21 '17 at 13:56
  • no i did not find it but , i tried a different approach though, i am now using drop downs instead of text boxes and popovers – Pein Apr 21 '17 at 15:10

0 Answers0