Programmatically call popover show() from typescript?

appresearcher commented 5 years ago

I believe it's this.pop.nativeElement.show();

Konrad Stępień staff commented 5 years ago

My example of code how to open manually popover.

HTML:

<button
  (click)="pop.show()"
  class="waves-light"
  color="success"
  mdbBtn
  mdbWavesEffect
  type="button"
>
  Show
</button>
<button
  (click)="pop.hide()"
  class="waves-light"
  color="warning"
  mdbBtn
  mdbWavesEffect
  type="button"
>
  Hide
</button>

<button mdbBtn color="info" class="waves-light" (click)="toggle()" mdbWavesEffect>Toggle</button>

<div
  #pop="bs-mdbPopover"
  class="md-form m-5"
  mdbPopover="Enter the name of a business  and search..."
  mdbPopoverHeader="Next Step"
  mdbWavesEffect
  placement="top"
  style="margin-left:2vw;"
>
  This text has an attached popover
</div>

TS:

import { Component, ViewChild } from '@angular/core';
import { PopoverDirective } from 'ng-uikit-pro-standard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('pop', { static: false }) pop: PopoverDirective;
  togglerOpened = false;

  toggle() {
    if (!this.togglerOpened) {
      this.pop.show();
    } else {
      this.pop.hide();
    }
    this.togglerOpened = !this.togglerOpened;
  }
}

appresearcher commented 5 years ago

Ah! Thanks! it wasn't clear from your API section that " Directives PopoverDirective Selector: mdbPopover Type: PopoverDirective" meant to declare it as a @ViewChild in the manner you show here. I was attempting to use a more traditional @ViewChild('pop', {static: false }) pop : ElementRef; Perhaps you could add example sections at least once to the Import Examples section, but ideally to each place where we can do something like this...?

Konrad Stępień staff commented 5 years ago

Hi @appresearcher,

Sorry for the problems.

The above example will be added to the documentation. So far it has not been expected by users, so it was not mentioned in the documentation.

Do you still need additional help?

Best, Konrad.