[BUG] Hot reload in Angular does not correctly render a pane's content

[noelherwig]

Describe the bug
When implementing a bottom pane in Angular, I ran across the issue where the content of a pane would initially be displayed inside the pane, but would appear outside of the pane after making changes to my code.

To Reproduce
Steps to reproduce the behavior:

1. Create a new Angular project and install 'cupertino-pane' version 1.5.4
2. Create a component for the bottom pane (e.g. app-bottom-pane) and implement it in the main app component.
3. Use ngAfterViewInit inside bottom pane component to create a new CupertinoPlane after view initialisation
4. Observe how the content appears inside the bottom pane
5. Make a change to the code. The page refreshes and the content now appears outside of the pane.

Expected behavior
The designated content appears inside the pane.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: 140.0.7339.128 (Official Build) (64-bit)

Additional context
I cannot seem to find any examples for Angular in the official documentation. It might be the case that I implemented something incorrectly, but I cannot verity that. An official example as part of the documentation would help.

[roman-rr]

@noelherwig Thank you. I will check shortly

[noelherwig]

@roman-rr Thanks for the quick response. Feel free to let me know if you need any of my code

[roman-rr]

@noelherwig Considering that the content appears outside after a refresh, I'm quite sure you need to initialize the pane's constructor as early as possible, ideally right after the page loads — for example, inside the Angular component's constructor, or at least within its ngOnInit lifecycle hook:

NgOnInit() {
   ... 
   this.pane = new CupertinoPane({...});  //  This will actually hide the content that will going into that pane.
}

Other thing I recommend you, if you using few panel in the same page, keep some parent service / component where you will initiate all panes, and pass @output / @inputs when you need an actions.

---

I’ll be happy to help you if you provide a super-simple of your code.

[noelherwig]

@roman-rr Thanks for looking into this. Unfortunately, I could not get your solution to work. I would appreciate it if you would take a quick look at my code. My component is as follows:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-bottom-pane',
  imports: [],
  templateUrl: './bottom-pane.component.html',
  styleUrl: './bottom-pane.component.scss',
})
export class BottomPaneComponent implements OnDestroy, AfterViewChecked {
  private readonly platformId = inject(PLATFORM_ID);
  private paneInstance: CupertinoPane | undefined;
  private readonly paneSettings: CupertinoSettings = {
    parentElement: 'body',
    breaks: {
      top: { enabled: true, height: 600, bounce: true },
      middle: { enabled: true, height: 300, bounce: true },
      bottom: { enabled: true, height: 80, bounce: true },
    },
    buttonDestroy: false,
    initialBreak: 'bottom',
  };

  private readonly paneContent = viewChild.required<ElementRef<HTMLDivElement>>('paneContent');

  ngAfterViewChecked(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.paneInstance = new CupertinoPane(this.paneContent().nativeElement, this.paneSettings);
      this.paneInstance.present().then(() => console.log('Presented'));
    }
  }

  ngOnDestroy(): void {
    if (this.paneInstance && this.paneInstance.isPanePresented()) {
      this.paneInstance.destroy({ animate: true });
    }
  }
}

My AppComponent only includes the <app-bottom-pane /> and the HTML for the BottomPaneComponent is as follows:

<div #paneContent>
  <h3>Hello from Cupertino Pane!</h3>
  <p>`Some content here</p>
</div>

The isPlatformBrowser guard is to make the window element behave correctly with SSR. I have tried changing the ngAfterViewChecked to different lifecycle hooks like you mentioned (e.g. ngOnInit) and I also tried putting the logic in the constructor, both to no avail. This is the only pane I am using on this page.

Looking forward to your answer!

[noelherwig]

@roman-rr Any updates on this yet?

[roman-rr]

Hi @noelherwig here is definitely architectural misunterstanding.
You created additional instance inside the Pane component and it's might fail due to DOM changes.
I recommend you to keep your pane constructors in the same component (our at least not in the Pane component itself) on the upper level e.g.

MainComponent 
     |
     |----- pane1 = new CupertinoPane(...)
     |----- pane2 = new CupertinoPane(...)
     |------ChildComponent1 (here we pass pane1/pane)
                    |--------- Here we able to do pane1.present(); or pane2
     |------ChildComponent2 (here we pass pane1/pane)
                    |--------- Here we able to do pane1.present(); or pane2

And then communicate bypass them with @input into child's.
If you will able to share repository for me with this code I will fix it in a proper way.

[noelherwig]

@roman-rr Thanks for the response. I have made an example project here: https://github.com/noelherwig/cupertino-pane-angular. Could you adapt this project to your explanation above? I appreciate the help, thanks!

[roman-rr]

Hello @noelherwig some new Angular hydration issues interfere with DOM manipulation
Try that:
bottom-pane.component.html

<div #paneContent class="pane-content hidden" ngSkipHydration> <!-- Add classes and attr -->

And that bottom-pane.component.ts

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-bottom-pane',
  host: {ngSkipHydration: 'true'}, // --> Add here 
  imports: [],
  templateUrl: './bottom-pane.component.html',
  styleUrl: './bottom-pane.component.scss',
})