Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
75
DockManager Event
posted

Hello team,
I am working with its DockManager component, unfortunately I have not been able to activate the paneClose or activePaneChanged event, the component does nothing.

I leave the code snippet:

// .TS

@ViewChild('dockPrincipal')
public dmPrincipal: ElementRef<IgcDockManagerComponent>;
ngAfterViewInit() {
this.dmPrincipal.nativeElement.addEventListener('paneClose', evt => {
console.log('paneClose');
console.log(evt);
});
}

// HTML
<igc-dockmanager #dockPrincipal [layout]=layout id="dockPrincipal" style="height: 100%;">
<div slot="1" class="dockManagerContent" style="width: 100%; height: 100%;">
<h2>EXAMPLE 1</h2>
</div>
<div slot="2" class="dockManagerContent" style="width: 100%; height: 100%;">
<h2>EXAMPLE 2</h2>
</div>
</igc-dockmanager>
Parents
  • 2180
    Verified Answer
    Offline posted

    Hello,

    I have tried your code in a stackblitz sample and it is working fine for me stackblitz.com/.../github-np1jzf-qx2vjv

    You could also add the event listeners in the html template like this:

    // html
    <igc-dockmanager
      #dockPrincipal
      [layout]=layout style="height: 600px;"
      (paneClose)="onPaneClose($event)"
    >
    
    // ts
    public onPaneClose(evt: CustomEvent<IgcPaneCloseEventArgs>) {
    console.log("paneClose from html");
    }

    I have demonstrated this approach in the stackblitz sample too.

    Let me know if I may be of any further assistance.

    Sincerely,
    Diyan Dimitrov
    Senior Software Developer

Reply Children