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

2
  • hi, have you found out ? We have same issue here. I've found this : stackoverflow.com/questions/35257455/… Commented Apr 21, 2017 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 Commented Apr 21, 2017 at 15:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.