Angular ngIF не работает внутри компонента

Question

У меня есть компонент с именем header, но внутри него мой ngIf не работает, и я понятия не имею, почему ...

header.ts

  @Input() title: string;
  @Input() subTitle: string;
  @Input() isPage: string;

header. html

<header>

  <div>
   //this *ngif does not work, if its 'yes' it hide the element and if i set to 'no' still hide
    <ion-buttons *ngIf="isPage === 'yes' " slot="start" (click)="goBack()" style="margin-left: 0.5em;">
      <ion-button>
        <ion-icon name="chevron-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

  </div>

  <div>
    // this work
    <h2>{{title}}</h2>
    <h1>{{subTitle}}</h1>
  </div>

</header>

otherComponent .ts

<ion-content>
  <app-header title="lorum" subTitle="ipsum" isPage="yes" ></app-header>
</ion-content>

Answer 1

Почему вы используете isPage в качестве строки? лучше использовать логическое

Тогда ваш код изменился на

@Input() isPage: Boolean;

И

<ion-buttons *ngIf="isPage" slot="start" (click)="goBack()" style="margin-left: 0.5em;">

И

<app-header [title]="lorum" [subTitle]="ipsum" [isPage]="true" ></app-header>

Answer 2

В вашем другом компоненте вы должны присвоить значение isPage переменной, например: const isPage = "yes";

Затем выполните это

<app-header [title]="App" [subTitle]="header" [isPage]=isPage></app-header>

Answer 3

Вы должны сделать isPage логическим и передать ввод следующим образом

<app-header [isPage]="true"></app-header>

Я создал StackBlitz пример