Page 1 of 1

showing Overlay Panel from code side

Posted: 09 May 2018, 21:00
by olakara
Hi All,

I have an overlay panel that needs to be trigger when I have some data that's fetched from server side. I use Ngrx so, I have something like this:

Code: Select all basicData => { 
            this.overlayPanelTemplate = basicData;
The overlayPanel is a @ViewChild variable as OverlayPanel. Note that I am trying to call toggle method but do not have the $event!! How do I show my panel? I tried the following:

Code: Select all

That is passing an empty object in place of the event. I do get the overlay panel to display but with lots of offSetHeight errors in my console :(
How do I create an event object or call the method to show the overlay panel?

Re: showing Overlay Panel from code side

Posted: 04 Jun 2018, 11:56
by JohnS264
I have the same issue.
Did you find any solution ?

Re: showing Overlay Panel from code side

Posted: 19 Jan 2019, 20:23
by romanKrds
You can generate the event by creating an instance of MouseEvent class providing event type: new MouseEvent('click').

Solution that worked for me:
this.overlayPanel.toggle(new MouseEvent('click'));
And don't forget about the link to target element which panel should be positioned to. Without that the panel will be placed at the top of the page. So at the end I've finished with:
this.overlayPanel.toggle(new MouseEvent('click'), this.bell.nativeElement);

where this.bell is:
@ViewChild('bell') public bell: ElementRef;

Re: showing Overlay Panel from code side

Posted: 21 Jan 2019, 08:24
by yigitfindikli
Toggle function wants event because getting target in event. You can give mouseevent like mentioning @romanKrds .

Re: showing Overlay Panel from code side

Posted: 10 Jun 2019, 16:24
by MDunlap84
The suggested solution functions in all browsers except IE. IE throws an exception when passing the mouse event, whether an element to bind to is passed or not. Any suggestions?