I want to hide a button but I already used NgIf to show it. The scenario would be when an option is selected, the dispose button will show itself. How do I hide the dispose button again when it is clicked and show two other buttons? Having two ngIfs is not allowed in Ionic 4.
<div class="no-scrollbar">
<ion-card text-wrap>
<ion-item>
<ion-img src="assets/images/persontrash.png" style="width:7mm; height:7.5mm; margin-right: 0" slot="start"></ion-img>
<ion-select id="dispose" text-wrap multiple="true" [(ngModel)]="dispose" placeholder="What to dispose?">
<ion-select-option value="Biodegradable">Biodegradable</ion-select-option>
<ion-select-option value="Non-biodegradable">Non-biodegradable</ion-select-option>
<ion-select-option value="Recyclable">Recyclable</ion-select-option>
<ion-select-option value="Hazardous Waste">Hazardous Waste</ion-select-option>
<ion-select-option value="Liquid Waste">Liquid Waste</ion-select-option>
<ion-select-option value=""></ion-select-option>
</ion-select>
<ion-icon name="notifications" slot="end"></ion-icon>
</ion-item>
</ion-card>
</div>
<div>
<ion-button shape="round" color="success" class="button-float-left">
<ion-icon name="call"></ion-icon>
</ion-button>
<ion-button shape="round" color="danger" class="button-float-right">
<ion-icon name="mail"></ion-icon>
</ion-button>
</div>
<div class="boxContainer">
<div class="box">
<ion-button *ngIf="dispose.length>0" color="success">Dispose</ion-button>
</div>
</div>
<script>
$(function(){
$("select").on("change", function(){
$("#dispose").toggle(!!this.value);
}).change();
});
</script>