How to Programatically open NgbPopOver from code without actually clicking on a button

Question

Requirement is to show an information message as to why save button is disabled. For the save button to enabled, some mandatory filters have to be chosen. So for the user to be aware of it, im trying to display a popover on the disabled button which shows the necessary information. I would want to display the popover to display on top of the button as soon as it is disabled. As of now my present code tries to achieve most of the requirement, except that i have to physically hover or click on the button to display the popup. I want to show the popup as soon as the button is disabled due to some logic in the code behind.

<button id="btnCancel" title="Cancel" aria-label="Cancel Filter dialog" class="btn btn-cancel"
            style="margin-right: 5px;" (click)="close();" (keydown)="trapFocus('cancel',$event)">CANCEL</button>
          <button id="btnApply" title="Apply" class="btn btn-primary"
          [disabled]="!(checkIfAnyFiltersAreSelected() && checkIfMandatoryFiltersAreSelected())"
          (click)="onApply()" (keydown)="trapFocus('apply',$event)">
            <span triggers="hover" *ngIf="!checkIfMandatoryFiltersAreSelected(); else elseTemplate" [ngbPopover]="popContent"
              popoverTitle="Mandatory Filters">
              APPLY
            </span>
            <ng-template #elseTemplate>
              APPLY
            </ng-template>
          </button>
          <ng-template #popContent>Necessary Information to be shown here</ng-template>

Tried to follow the solution in this question, but the answer is not clear and is not solving the issue

ngbPopover will not close and will open on load

Answer 1

You can accomplish this by defining a manual trigger for the popover and passing the popover into the function that determines whether the button is disabled, so that if the button is disabled the popover can be opened programatically.

HTML Template

If you define the button as follows:

<button type="button" class="btn btn-outline-secondary mr-2" 
    placement="top" ngbPopover="Displayed when button is disabled"
    triggers="manual" #p="ngbPopover" [disabled]="isDisabled(p)">
      Apply
</button>

• triggers="manual" means it won't be triggered automatically by hovering over the button
• #p="ngbPopover" is the reference to the NgbPopover object
• [disabled]="isDisabled(p)" is a function that returns a boolean indicating whether the button should be disabled or not. Passing in p (the NgbPopover) allows it to be opened programatically in the isDisabled function.

TypeScript

The isDisabled function looks like this:

isDisabled(popover) {
  if (this.disabled) {
    popover.open();
  }
  return this.disabled;
}

This checks the value of the disabled property (this is just a boolean I've defined in the TypeScript file), and will open the popover if it is true. It then returns the value so that the HTML template can enable/disable the button accordingly.

Please see this StackBlitz for a demo. If you toggle the checkbox (which is bound to the disabled TypeScript property, you will see that the popover is displayed when the button is disabled.