showing Overlay Panel from code side

[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

 this.store.select(getBasicInfo).subscribe( basicData => { 
            this.overlayPanelTemplate = basicData;
            this.overlayPanel.toggle();
 });

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

this.overlayPanel.toggle({});

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?

[JohnS264]

I have the same issue.
Did you find any solution ?

[romanKrds]

You can generate the event by creating an instance of MouseEvent class providing event type: new MouseEvent('click').
https://developer.mozilla.org/docs/Web/API/MouseEvent

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;

[yigitfindikli]

Toggle function wants event because getting target in event. You can give mouseevent like mentioning @romanKrds .

[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?