Skip to main content

angular bootstrap - Popover manual triggers

app.component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  onClick(popover:NgbPopover){
    if (popover.isOpen()) {
      popover.close();
    } else {
      popover.open();
    }
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:40px;">
  Angular Bootstrap - Popover manual triggers
</h4>

<button 
  #pop="ngbPopover"
  placement="end-top"
  triggers="manual"
  [autoClose]="false"
  (click)="onClick(pop)"
  ngbPopover="Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.
    Vivamus eget sodales justo.
    Donec eu condimentum nibh, eu congue mi.
    Phasellus malesuada ipsum sit amet faucibus placerat." 
  popoverTitle="Popover Manual Triggers">
    {{pop.isOpen()? 'Close Popover' : 'Open popover'}}
</button>
More Angular tutorials
Labels: