Pane component expansion not working correctly

Siemens iX
1

Hello,
we are using IX siemens 2.1.0 with angular, and we are trying to implement a right side panel.
i tried recreating the same code as in the documention, but Pane expantion doesn’t seem to be working, that’s because there is no expansion nor hiding, its just showing the content on top of all the other components of our webapp.

here is my code :

<ix-pane heading="Pane Popup" composition="right" size="100%" variant="floating" hide-on-collapse
        [expanded]="expanded" (expandedChanged)="expandedChanged($event)"
        style="position: absolute; right: 0; z-index: 1">
        <p>This is a popup pane.</p>
</ix-pane>

on the web app, the attribute expanded doesn’t appear :
image

here is my .ts :

export class SidenavAssetsComponent implements OnInit {

  expanded: boolean | undefined;
  private sidenavSubscription: Subscription = new Subscription;

  constructor(private sidenavService: SidenavService) {
    this.sidenavSubscription=this.sidenavService.expanded$.subscribe(expanded => this.expanded = expanded);
  }

  expandedChanged(event: any) {
    console.log('expandedChanged', event);
  }

  ngOnDestroy() {
    if (this.sidenavSubscription) {
      this.sidenavSubscription.unsubscribe();
    }
  }

  data = {
    firstName: '',
    lastName: '',
    userName: '',
  };

  ngOnInit(): void {
  }

}

FYI: im using a service because it’s not directly the same component that toggles the pane

2

Hello @mohammed-larbi.hikel, to me it looks like you never change the value of expanded. Therefor the pane never closes.

3

hey @LukasMaurer, thanks for the answer

but im sure the expanded value is changing, because when i change “this.expanded = expanded” into “console.log(expanded)”, each time i perform a toggle the value changes.

what’s puzzling me is that no “expanded” attribute is showing on the rendered html of our webapp

4

In this case please provide a runnable example that showcases this behavior (e.g. StackBlitz). Thank you.

1 Like