Issue with panes on multiple pages

[jakamusic]

Hey,

I encountered an issue, where if I navigate from one page that has the pane, to the other that has is as well, I get this error: ERROR TypeError: Cannot read property 'style' of undefined. (Angular, Ionic).

As far as I could tell, the issue happens on the moveToBreak() function, if I don’t have all of the possible properties defined when creating a new CupertinoPane.

[jakamusic]

I investigated some more and noticed that before the .present() function is fired successfully this is the content of the pane variable:

And before the .present() is fired unsuccessfully, this is the content of the pane variable:

Note: on each page I create an element with different ID (also tried with class) so I am registering different elements (new CupertinoPane('#busko__qs-' + this.componentName, this.settings);)

[roman-rr]

@jakamusic Thanks for issue.

1. Update pane package to latest version and try again. Issue still exist ?
2. You gonna use one Pane in different ionic pages ? Each ionic page have own controller, and if you create Pane class in one controller it's should exist in other page controller. That's why you need declare class and .present() again in other page and it's create new Pane class.
   But, if you need to use one Pane in few pages, you can add html into main app.component.html template, and create new service. In this service declare Pane class, and use in each pages Pane methods from this service.

If my suggestions doesn't solve your issue, please provide code in some of sample repository, and i will complete it for you.

[jakamusic]

Thanks for the reply. I have the latest version installed. What I have is the same drawer but on three different pages, where I can navigate from one to another at any time.

So, basically I have tested now a couple of options.

• If I just have it initialised with with the same class on all three pages, I get the error immediately. - If I initialise them with different classes on each page, the error will occur when navigating to a page again, after I was already on it at some point.

I have created a sample Ionic project that demonstrates the issue: https://github.com/jakamusic/cupertino-pane-test

[roman-rr]

@jakamusic
In your repo html element only in tab1.page.html

On Tab1Page element successful created, then on Tab2Page, Tab3Page you trying initialize new pane classes, but html elements doesn't exist.

If you want using 3 different panes in each tabs:
Add elements with unique selectors to all tabs html

If you want using 3 different panes with same selector
Add elements to all tabs html with class cupertino-pane. On ngOnDestroy call method .destroy() to utilize pane correctly.

If you want use one pane in all 3 pages
Initialize it once on Tab1Page, with higher parent container. In Tab2Page, Tab3Page use referencies from PaneService

Check my updates in repository you provided 🎉

[jakamusic]

Yes, that does it! Thanks for your time and help! I'll leave the repo active, in case anyone will encounter the same issue.