CODEWITHSUNDEEP
angularpopoverng-bootstrap
emka26
emka26

Reputation: 443

Popover/tooltip ui bootstrap angular 6 under condition

I must open popover under some condition. How can I do this? 

  <div class="btn btn-outline-secondary" *ngFor="let category of categories"
  [ngbPopover]="tipContent"
  popoverClass="change-category-info"
  placement="bottom"
  tooltipClass="change-category-tooltip">{{category}}</div>

In this implementation popover is open always after click. I would like to open this popover under condition, eg if this.isChanged = true

Upvotes: 1

Views: 3023

Answers (2)

peregrination
peregrination

Reputation: 2638

You can use the disablePopover input to prevent the popover from displaying, as mentioned in the API documentation.

Assuming isChanged is a public property in your component, it would look like this:

  <div class="btn btn-outline-secondary" 
       *ngFor="let category of categories"
       [ngbPopover]="tipContent"
       popoverClass="change-category-info"
       placement="bottom"
       tooltipClass="change-category-tooltip"
       [disablePopover]="!isChanged">{{category}}</div>

Upvotes: 0

yurzui
yurzui

Reputation: 214175

You can take full manual control over popover by using triggers="manual" input.

<button ... triggers="manual" #p="ngbPopover" (click)="isChanged && p.open()">
  Popover on right
</button>

Stackblitz Example

Example with ngFor

See also:

Upvotes: 2

Related Questions