从角2组件以编程方式打开ngbpopover

Question

I am following this article to get bootstrap working with Angular 2. While that works as per article there is no example of how to pass the reference of the popover to a component method. All I got was an NgbPopoverConfig but that doesn't have the reference to open the popover.

This is my component method

popOpen(p : NgbPopoverConfig): void {

    p.open(); //get an error here saying no Open method on NgbPopoverConfig
 }

and this is my html where I am using a material 2 based input field.

<md-input type="email"  value=""  name="em" id="em" placement="left" ngbPopover="adfga"  popoverTitle="Popover on left" triggers="manual" #p="ngbPopover" (click)="p.Open()"  [(ngModel)]="thisModel.email" 
                          #this="ngModel">
</md-input>

Any documentation on how to Programatically open and close the popover from the typescript component code? or some sample code?

I am using angular 2.1.0 with Bootstrap 4.0.0-alpha.5 and angular material 2.0.0-alpha.9-3

Answer 1

Seems you mistyped: it should be open instead of Open . Javascript is case sensitive

Plunker Example

Answer 2

Solved it. There were two things I had to do. First get the reference to ngbPopover

import {NgbPopover } from '@ng-bootstrap/ng-bootstrap/popover/popover';

and change my component method to:

popOpen(p : NgbPopover): void {

    p.open();  
 }

then register the even handler like so:

<md-input type="email"  value=""  name="em" id="em" placement="left" ngbPopover="adfga"  popoverTitle="Popover on left" triggers="manual" #p="ngbPopover" (blur)="edit=!edit; checkExists(p)"  [(ngModel)]="thisModel.email" 
                          #this="ngModel">
</md-input>

Now when I lose control of the textbox, I will have a component method called that will check if email exists and if yes, I can now use the reference of p to fire the open() method.

I would like to know more about this edit=!edit; Does anyone know why this creates the magic that registers the blur event?

Answer 3

There are a few things that you need to do to use close or open API if your environment is below:

ng-bootstrap: 1.xx,Angular: 5.0.2,Bootstrap CSS: 4.0.0

in your component.ts , you need to import 'NgbPopover':

import {NgbPopover } from '@ng-bootstrap/ng-bootstrap';

  openPop(p : NgbPopover): void {
    this.popover.isOpen() ? this.popover.close() : this.popover.open();
  }

in your HTML template,

<button #popover="ngbPopover" placement="bottom" ngbPopover="adfga"  popoverTitle="Popover on left" triggers="manual" (click)="openPop(popover)"></button>

However, if your environment is different, you might need to check their official document to see what changes they implement.

Answer 4

Here is the code that work for me

import {Component} from '@angular/core';
import {NgbPopover } from '@ng-bootstrap/ng-bootstrap/popover/popover';
@Component({
  selector: 'ngbd-popover-triggers',
  templateUrl: './popover-triggers.html'
})
export class NgbdPopoverTriggers {
condition : boolean = true;
  openPop(popover : NgbPopover): void {
    console.log(this.condition);
    popover.isOpen() ? popover.close() : popover.open();
  }
}

And the HTML code for the component

<br>
<br>
<br>
<br> 



<div>
<ng-template #popContent>Hello, <b>{{name}}</b>!
<button (click)="onClickYes()" type="button" class="btn btn-outline-secondary" >
  Yes
</button>
<button (click)="onClickNo()" type="button" class="btn btn-outline-secondary" >
  No
</button>
</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
</div>

<button placement="top" [popoverTitle]="popTitle" #popover="ngbPopover"  [ngbPopover]="popContent"  triggers="manual" (click)="openPop(popover)">click me </button>