Need help to display multiple <ion-list> by using *ngIf

Ionic Framework ionic-v3
1

Hi guys,

I have this HTML code to display 2 ion-list with fixed header


<ion-content class="footer">
  <ion-list>
		<ion-item style="background-color:#EAECEE" *ngIf="notesList!=null">
			<label>My Notes</label>
		</ion-item>
		<div *ngFor="let note of (notesList | async)">
			<ion-item-sliding>
				<button ion-item (click)="x()">
					<ion-avatar item-start>
						<img src="imgs/Folder.png">
					</ion-avatar>
					<h3>
						{{note.title}}
					</h3>
					<p style="overflow: hidden; max-width: 30ch;">
						{{note.desc}}
					</p>
				</button>
				<ion-item-options side="right">
					<button ion-button (click)="share(note.$key, note.title,note.desc)" color="">
						<ion-icon name="share"></ion-icon>
						Share
					</button>
					<button ion-button (click)="delete(note.$key)" color="danger">
						<ion-icon name="trash"></ion-icon>
						Delete
					</button>
				</ion-item-options>
			</ion-item-sliding>
		</div>
		<ion-item style="background-color:#EAECEE" *ngIf="sNotesList !=null">
			<label>Shared Notes</label>
		</ion-item>
		<div *ngFor="let sNote of (sNotesList | async)">
			<ion-item-sliding>
				<button ion-item (click)="x()">
					<ion-avatar item-start>
						<img src="imgs/SFolder.png">
					</ion-avatar>
					<h3>
						{{sNote.title}}
					</h3>
					<p style="overflow: hidden; max-width: 30ch;">
						{{sNote.desc}}
					</p>
				</button>
				<ion-item-options side="right">
					<button ion-button (click)="sDelete(sNote.$key)" color="danger">
						<ion-icon name="trash"></ion-icon>
						Delete
					</button>
				</ion-item-options>
			</ion-item-sliding>
		</div>
  </ion-list>
	<ion-fab bottom right padding>
    <button ion-fab (click)="add()" color="AppColor"><ion-icon name="add"></ion-icon></button>
  </ion-fab>
</ion-content>

I want to hide these part of html if the length of there list is zero (empty)

<ion-item style="background-color:#EAECEE" *ngIf="notesList!=null">
			<label>My Notes</label>
		</ion-item>

<ion-item style="background-color:#EAECEE" *ngIf="sNotesList !=null">
			<label>Shared Notes</label>
		</ion-item>
2

Note: The type of lists is,

public notesList: FirebaseListObservable<any[]>;
public sNotesList: FirebaseListObservable<any[]>;
3

I found the solution

<ion-item style="background-color:#EAECEE" *ngIf="(notesList | async)?.length > 0">
			<label>My Notes</label>
		</ion-item>
4

Perhaps this is not a truly worthwhile major concern, but I would worry that running notesList through the async pipe multiple times in the template would be wasteful, and probably prefer to do that in the controller code only once.

1 Like