I want to display an arrow to go back in one of my Page because I'm coming on this page without using navCtrl, from app.component.ts, as stated here.
So when I'm coming on this page from app.component.ts, I'm setting a flag to true and having a condition in my template that display a col-1 with a backArrow inside and a click that brings to another page if this flag is set to true. But this arrow is never displayed. I checked on developer console in the DOM and the col-1 is present, but the arrow has a width of 0.
Here is the screen of the result:
Here's my header:
<ion-header>
<ion-navbar>
<ion-row *ngIf="backArrow else elseBlock3">
<ion-col col-1>
<ion-buttons left>
<button ion-button large (click)="goToChats()"><ion-icon name="arrow_back" style="font-size:32px;"></ion-icon></button>
</ion-buttons>
</ion-col>
<ion-col col-10>
<ion-title style="margin-left:30%;margin-top:-3.5%;">
<img src="assets/imgs/masque.png" title="Masque Neemous" alt="Masque Neemous" style="margin-left: -2.5%;"><br />
Chat
</ion-title>
</ion-col>
<ion-col col-1>
<ion-buttons right>
<button ion-button large style="margin-left:-180%;margin-top:20%;" (click)="showMenu()"><ion-icon name="menu" style="font-size:32px;"></ion-icon></button>
</ion-buttons>
</ion-col>
</ion-row>
<ng-template #elseBlock3>
<ion-row>
<ion-col col-11>
<ion-title style="margin-left:30%;margin-top:-3.5%;">
<img src="assets/imgs/masque.png" title="Masque Neemous" alt="Masque Neemous" style="margin-left: -2.5%;"><br />
Chat
</ion-title>
</ion-col>
<ion-col col-1>
<ion-buttons right>
<button ion-button large style="margin-left:-180%;margin-top:20%;" (click)="showMenu()"><ion-icon name="menu" style="font-size:32px;"></ion-icon></button>
</ion-buttons>
</ion-col>
</ion-row>
</ng-template>
</ion-navbar>
</ion-header>
I searched for hours in the internet but never found any related thread, I can't see what's causing this. Any help would be appreciated.
Thanks to anyone who will read/answer this post.