ngIf does not show items correctly inside Ion Modals

I have a page from which a modal component can be opened.

This the modal component html:

<div *ngIf="editItem == false">
  <ion-header translucent>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button style="color: white" (click)="closeModel()">Back</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button color="primary" (click)="editItem()">Edit</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-item>
      <ion-label>Type: {{itemDetail.typeOfField}}</ion-label>
    </ion-item>

    <ion-item>
      <ion-label>Name: {{itemDetail.nameOfField}}</ion-label>
    </ion-item>
  </ion-content>

</div>

<div *ngIf="editItem == true">
  <ion-header translucent>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button style="color: white" (click)="closeEdit()">Cancel Edit</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button color="primary">Save</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
</div>

This is the componenets ts:

import {Component, Input, OnInit} from '@angular/core';
import {ModalController} from '@ionic/angular';

@Component({
  selector: 'app-licences-detailed',
  templateUrl: './licences-detailed.component.html',
  styleUrls: ['./licences-detailed.component.scss'],
})
export class LicencesDetailedComponent implements OnInit {

  @Input()
  public itemDetail: any = [];

  protected returnValue: any;
  public editItem = false;

  constructor(
    protected modalController: ModalController,
  ) {
  }

  ngOnInit() {
  }



  editItem() {
    this.editItem = true;
  }

  closeEdit() {
    this.editItem = false;
  }

  async closeModel() {
    await this.modalController.dismiss(this.returnValue);
  }

}

The problem I am having is when this modal first opens editItem is false, and 2 's are in the content however only 1 shows (The first one itemDetail.typeOfField) any thing else after this does not show.

Note everthing before the first like the header stuff does show

Wondering if anyone can tell me why this may be

Thanks

1 post - 1 participant

Read full topic