How to replace the html table with a new content in ionic 3?

Ionic Framework ionic-v3
2

@anespa You can do your code similar to the following, where in your component you have a public property items (that you could populate, for example, doing an http request to your server).

Here I made the code simple but functional, to be easy to understand. You would have a property selectedItem in your ts file without value initially, and when the user clicks an item in the list, the selectedItem property receives that value. There is an ngIf that shows the list when there is no selected item, and the item details when there is a selected item.

So, when you select the item the list is not shown anymore and the item details is shown. I included a buttom in the bottom of the item details to return to show the list again and hide the details (actually, it removes the details from the DOM).

Related code:

<div class="search">
	<div>Plan Projects - Search</div>
	...
	<button (click)="search()">Search</button>
</div>

<div *ngIf="!selectedItem" class="list">
	<div>[Project no.] Project Name</div>
	<div *ngFor="let item of items" (click)="selectedItem = item">{{ item.name }}</div>
</div>

<div *ngIf="selectedItem" class="details">
	<item-details [item]="selectedItem"></item-details>
	<button (click)="selectedItem = null">Return</button>
</div>

Just have in mind that preserving the scroll in the list could be trick. I don’t know if this will work well in an ionic page because the ion-content has its own scroll. You could give a look at ion-scroll and make the list hidden (instead of removing it from the DOM with ngIf) to preserve the scroll position.

1 Like