Custom component receives boolean variable but does not update NgIf in HTML

Question

I have a custom component that has an *ngIf in its view and receives a boolean variable, but *ngIf doesn't work. This is the code:

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>

Does anyone know what I'm doing wrong?

score 0 · Answer 1 · answered Jul 30 '21 at 20:45

0

I think your input is being set after the ngAfterViewInit lifecycle hook. Also it's a bit redundant to reassign a field. You can simply use the backButton input in your template.

<ion-buttons *ngIf="backButton == true" slot="start">

answered Jul 30 '21 at 20:45

eko

39,722
10
72
98

Thanks for the answer! I've tried assigning values to inputs inside an ngOnInit and inside the constructor too, but to no avail. The problem is not just the Back button, but also other elements that vary in the header from page to page. The important thing is to find out what I'm doing wrong for ngif to work. – Ton Sapia Jul 30 '21 at 20:55
You shouldn't assign values to the inputs anywhere. They should only come from the parent component and that's it. You also shouldn't create duplicate fields to use them. My solution also doesn't work then? – eko Jul 30 '21 at 20:59
Okay, I removed the assignments and used the variable in the html the way I define it in the input *ngIf="backButton == true", but it didn't work. – Ton Sapia Jul 30 '21 at 21:09

score 0 · Accepted Answer · answered Jul 30 '21 at 23:06

0

This code below works right, with the logic you need:

You can check it here: (you only need to change the value of [backButton]="true" to [backButton]="false" to see it showing/not showing the son)

FATHER HTML:

<app-header
  title="If you see this, backButton is set to true"
  [backButton]="true"
>
</app-header>

SON HTML:

<div *ngIf="backButton">
  {{ title }}
</div>

SON COMPONENT TS:

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: []
})
export class HeaderComponent {
  @Input("title") title;
  @Input("backButton") backButton;
}

answered Jul 30 '21 at 23:06

Juan Vicente Berzosa Tejero

2,786
2
5
15

I tested your solution with both ionic serve and ionic lab but it didn't work... – Ton Sapia Jul 31 '21 at 00:14
So, the problem is not the communication between both components by the @input boolenv variable. It's something related with the ionics components, isn't it? – Juan Vicente Berzosa Tejero Jul 31 '21 at 15:41
Yes, that wasn't the problem. I recently updated ionic cli and node in my project. It must have given some incompatibility. I created a new project from scratch and now it works. Thank you all for your help! – Ton Sapia Aug 01 '21 at 20:31

score 0 · Answer 3 · answered Jul 31 '21 at 10:16

I think you should affect your data values in the ngOnchnages lifecycle method :

// Runs whenever component @Inputs change

@Input('title') titleText;
@Input('backButton') backButton: boolean;
@Input('avatarImage') avatarImage;
@Input('userId') userId;
@Output('avatarClicked') avatarClicked = new EventEmitter()

titlePage: string;
img: string; 
back: boolean = false;

constructor() 




   ngOnChanges () {
        // Check if the data exists before using it
        if (this.backButton) {
             this.back = this.backButton; 
        {
    }

Custom component receives boolean variable but does not update NgIf in HTML

3 Answers3