Programmatically call popover show() from typescript?


Topic: Programmatically call popover show() from typescript?

appresearcher asked 2 years ago

Due to an issue in Edge, the popover is not correctly being opened when another HTML element is clicked. It's working in all other browsers. I want to be able to execute from typescript. In my HTML, I'm using your sample code in a div...

<div class="md-form" style="margin-left:2vw;" mdbPopover="Enter the name of a business  and search..."
 placement="top" mdbPopoverHeader="Next Step" #pop="bs-mdbPopover" mdbWavesEffect>

Then in the typescript, I'm doing the typical stuff to define an ElementRef and execute a native function...

@ViewChild('pop', { static: false }) pop: ElementRef;
...
this.pop.nativeElement.show();

I get the following error...

ERROR TypeError: Unable to get property 'nativeElement' of undefined or null reference

I have tried both static: true/false. This exact same method works on other items in the same component. What's up?


Konrad Stępień staff answered 2 years ago

Hi @appresearcher,

Can you use this code?

@ViewChild('pop', { static: false }) pop: any;
...
this.pop.show();

NativeElement gets acces to HTML elements.

Best, Konrad.


appresearcher commented 2 years ago

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


Konrad Stępień staff commented 2 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 2 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 2 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.0
  • Device: Surface Pro
  • Browser: Edge
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No