Topic: Programmatically call popover show() from typescript?
appresearcher free asked 4 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 4 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 free commented 4 years ago
I believe it's this.pop.nativeElement.show();
Konrad Stępień staff commented 4 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 free commented 4 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 4 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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