Forums Ignite UI for Angular
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
Close
Mario Ruiz
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
No Data
Reply
  • 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

Children