showing Overlay Panel from code side

UI Components for Angular
Post Reply
Posts: 4
Joined: 04 Apr 2017, 19:00

09 May 2018, 21:00

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?

Posts: 18
Joined: 18 Aug 2017, 13:25

04 Jun 2018, 11:56

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

Posts: 1
Joined: 19 Jan 2019, 20:10

19 Jan 2019, 20:23

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;

Posts: 415
Joined: 08 Aug 2018, 14:09

21 Jan 2019, 08:24

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

Posts: 1
Joined: 10 Jun 2019, 16:22

10 Jun 2019, 16:24

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?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests