Hello community!
I present my problem.
I’ve been trying to render my ion-split-pane component for several days.
Info about my project =>
Ionic:
Ionic CLI : 6.19.1 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.4.4
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 7.1.4, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 11 other plugins)
Utility:
cordova-res : 0.15.4
native-run (update available: 1.6.0) : 1.4.1
System:
Android SDK Tools : 26.1.1 (/home/guidogagliardini/Android/Sdk)
NodeJS : v14.19.1 (/home/guidogagliardini/.nvm/versions/node/v14.19.1/bin/node)
npm : 6.14.16
OS : Linux 5.15
in one of my components, I am reusing the component where my ion-split-pane is hosted =>
result-operator.component.html =>
<app-derivation-results></app-derivation-results>
in component derivation-results.component.html =>
<ion-header *ngIf="isOperator">
<ion-toolbar class="menu-antecedentes-op" style="padding-top: 0px !important">
<ion-buttons slot="start">
<ion-menu-button (click)="togglePanel()">
<img src="../../../../../../assets/img/icon-menu-hamburguesa.svg" style="margin-top: 4px" />
</ion-menu-button>
</ion-buttons>
</ion-header>
<ion-split-pane style="margin-top: 35px" [ngClass]="this.isPanelOpen ? 'panel-opened' : ''" when="z-index:2">
<ion-menu contentId="content" (ionDidOpen)="openPanel()" (ionDidClose)="closePanel()">
<ion-content>
<ion-list>
<ion-list-header style="
color: #606060;
font-size: 16px;
font-weight: 600;
color: #606060;
font-size: 16px;
font-weight: 600;
background: #fff3f3;
border-bottom: 1px solid rgba(96, 96, 96, 0.5);
">
<ion-label> Derivaciones </ion-label>
</ion-list-header>
<ion-menu-toggle autoHide="false" *ngIf="analysis_pending && analysis_pending.length > 0">
<ion-item *ngFor="let item of analysis_pending" (click)="getHistory(item)" class="ligth">
<ion-label style="
margin-bottom: 0px !important;
margin-top: 5px !important;
color: #d12f22;
font-size: 14px;
font-weight: 600;
">
Pendiente
</ion-label>
<ion-label style="margin-top: 3px !important">
<b> {{ item.derivation_identifier }}: </b>
{{
item.derivation_created_at
| date: "EEEE":null
| titlecase
| slice: 0:3
}}
{{
item.derivation_created_at
| date: "dd/MM - HH:mm"
| titlecase
}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle autoHide="false" *ngIf="analysis_accepted && analysis_accepted.length > 0">
<ion-item *ngFor="let item of analysis_accepted" (click)="getHistory(item)" class="ligth">
<ion-label style="
margin-bottom: 0px !important;
margin-top: 5px !important;
color: #d12f22;
font-size: 14px;
font-weight: 600;
">
Aceptada
</ion-label>
<ion-label style="margin-top: 3px !important">
<b> {{ item.derivation_identifier }}: </b>
{{
item.derivation_created_at
| date: "EEEE":null
| titlecase
| slice: 0:3
}}
{{
item.derivation_created_at
| date: "dd/MM - HH:mm"
| titlecase
}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-list-header style="
background: #ffc2c2 !important;
min-height: 30px;
padding-left: 0px !important;
">
<ion-label> Antecedentes </ion-label>
</ion-list-header>
<ion-menu-toggle autoHide="false" *ngIf="analysis_history && analysis_history.length > 0">
<ion-item *ngFor="let item of analysis_history" (click)="getHistory(item)">
<ion-label>
<b> {{ item.derivation_identifier }}: </b>
{{
item.derivation_created_at
| date: "EEEE":null
| titlecase
| slice: 0:3
}}
{{
item.derivation_created_at
| date: "dd/MM - HH:mm"
| titlecase
}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle autoHide="false" *ngIf="!analysis_history">
<ion-item class="ligth">
<ion-label> Sin Antecedentes. </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>
Sorry, the content is quite long. In this component (I’m only showing the part of the ion-split-pane) all the content is displayed perfectly, except that when I click on (click)=“togglePanel()” I don’t see It shows the ion-split-pane, but I can see that the component is there, from the Chrome inspector.
Curiously, when I enter through another part of the routing, where I use the component natively (derivations-results.component) the ion-split-pane works perfectly.
What is failing?
What needs to be configured?
Is ion-router-outlet configured correctly?
Thank you very much for your input and help.