I am struggling with a custom component that includes an *ngIf in its view to handle a boolean variable, but for some reason the *ngIf directive is not working. Here is the code snippet:
Component
@Input('title') titleText;
@Input('backButton') backButton;
@Input('avatarImage') avatarImage;
@Input('userId') userId;
@Output('avatarClicked') avatarClicked = new EventEmitter()
titlePage: string;
img: string;
back: boolean = false;
constructor() {}
ngAfterViewInit() {
this.titlePage = this.titleText;
this.img = this.avatarImage;
this.back = this.backButton;
}
openPersonalData() {
this.avatarClicked.emit({value: this.userId})
}
Component HTML
<ion-header>
<ion-toolbar>
<ion-buttons *ngIf="back == true" slot="start">
<ion-back-button text="Voltar"></ion-back-button>
</ion-buttons>
<ion-title>{{ titlePage }}</ion-title>
<ion-avatar slot="end" (click)="openPersonalData()">
<img [src]="img">
</ion-avatar>
</ion-toolbar>
</ion-header>
Page using the component
<app-header title="Chat"
[backButton]="true"
avatarImage="{{ user[0].img }}"
userId="{{ user[0].id }}"
(avatarClicked)="openPersonalData($event)">
</app-header>
Any insights on what might be causing this issue would be greatly appreciated.