ngIf does not show items correctly inside Ion Modals

Ionic Framework Ionic Angular
1

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

2

the content is right there but it’s hidden: the first div covers the rest of your content (in fact if you set a min-height of 150-200px you should be able to see it).
Your code is a bit messy, that’s why you are having troubles.

try something like this:

<ion-header translucent>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button *ngIf="editItem == false; else elseCloseModel" style="color: white" (click)="closeModel()">Back
      </ion-button>
      <ng-template #elseCloseModel>
        <ion-button style="color: white" (click)="closeEdit()">Cancel Edit</ion-button>
      </ng-template>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button *ngIf="editItem == false; else elseEditClock" color="primary" (click)="editItemFunc()">Edit
      </ion-button>
      <ng-template #elseEditClock>
        <ion-button color="primary">Save</ion-button>
      </ng-template>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content *ngIf="editItem == false">
  <ion-item>
    <ion-label>Type: {{itemDetail.typeOfField}}</ion-label>
  </ion-item>

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

Thank you lots for this, correct it was hidden

1 Like