I am currently working on a straightforward application using Angular 9 and Ionic 5. The main page consists of a list of items.
Here is my HTML code:
<ion-header>
<ion-toolbar>
<ion-title>recipes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<app-recipe-item *ngFor="let recipe of recipes" [recipeItem]="recipe">
</app-recipe-item>
</ion-list>
</ion-content>
And here is my TypeScript code:
import { RecipesService } from './recipes.service';
import { Recipe } from './recipes.model';
import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-recipes',
templateUrl: './recipes.page.html',
styleUrls: ['./recipes.page.scss'],
})
export class RecipesPage implements OnInit, OnChanges {
recipes: Recipe[];
constructor(
private recipesService: RecipesService
) { }
ngOnInit() {
this.recipes = this.recipesService.getAllRecepies();
}
ngOnChanges(changes: SimpleChanges) {
}
}
Upon clicking an item in the list, I am directed to a detailed page for that item where I have the option to delete it.
HTML:
<ion-header>
<ion-toolbar color="primary">
<ion-button slot="start">
<ion-back-button defaultHref="/recipes"></ion-back-button>
</ion-button>
<ion-title>
{{ loadedRecipe.title }}
</ion-title>
<ion-button slot="primary" (click)="onDeleteRecipe()">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-button>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid fixed class="ion-no-padding">
<ion-row>
<ion-col class="ion-no-padding">
<ion-img [src]="loadedRecipe.imageUrl"></ion-img>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<h1 class="ion-text-center">{{ loadedRecipe.title}}</h1>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-item *ngFor="let ig of loadedRecipe.ingredients">
{{ ig }}
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
TypeScript:
import { RecipesService } from './../recipes.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Recipe } from '../recipes.model';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'app-recipe-detail',
templateUrl: './recipe-detail.page.html',
styleUrls: ['./recipe-detail.page.scss'],
})
export class RecipeDetailPage implements OnInit {
loadedRecipe: Recipe;
constructor(
private activatedRoute: ActivatedRoute,
private recipeService: RecipesService,
private router: Router,
private alertCtrl: AlertController
) {}
ngOnInit() {
this.activatedRoute.paramMap.subscribe(paramMap => {
if (!paramMap.has('recipeId')) {
// redirect
this.router.navigate(['/recipes'])
return;
} else {
const recipeId = paramMap.get('recipeId');
this.loadedRecipe = this.recipeService.getRecipe(recipeId);
}
});
}
onDeleteRecipe() {
this.alertCtrl.create({
header: 'Are you sure?',
message: 'Do you want to delete the recipe?',
buttons: [{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Delete',
handler: () => {
this.recipeService.deleteRecipe(this.loadedRecipe.id);
this.router.navigate(['/recipes']);
}
}
]
}).then(alertEl => {
alertEl.present();
});
}
}
After deleting an item, I am returned to the main page with all the items still displayed. The onInit method is not triggered, so the updated list of items is not reflected. Clicking on the deleted item leads to a blank page as the item no longer exists. What steps should I take to ensure that the deleted item is no longer visible on the main page?