Les autres actions
Maintenant que tu sais faire de beaux formulaires, tu peux ajouter les différentes actions pour chaque film du tableau.
Colonne et icons
Tu dois :
- ajouter une colonne Actions au tableau.
- ajouter des boutons icons. Pour ça, tu peux utiliser bootstrap icons
Info
Pour installer les icons Bootstrap :
- Faire npm i bootstrap-icons
- Ajouter @import "bootstrap-icons/font/bootstrap-icons.css";
dans le fichier styles.scss
- Utiliser l'icon que tu veux avec la balise <i></i>
. Par exemple : <i class="bi bi-trash-fill"></i>
Liens entre les boutons et les appels au back
Comme pour le formulaire de création, fais en sorte d'appeler le service qui contient tes appels au back au clic sur le bouton.
Par exemple pour la suppression d'un film :
Info
subscribe() au delete te permet ici de mettre à jour ta liste de films this.movies
, une fois que tu en as supprimé un.
Attention, tu ne peux donc plus utiliser le | async
dans le HTML de ton composant. Tu dois créer une variable puis subscribe pour récupérer ta liste au début.
movies: Movie[];
ngOnInit(): void {
this.moviesService.getMovies().subscribe(movies => this.movies = movies);
}
| async
coté HTML et utilise notre nouvelle variable movies
🙋♀️ Checkpoint time 🙋
Appelle-nous pour qu'on valide cette partie !!️
À toi de jouer pour la création du bouton update ! 👾
Voici les grandes étapes à faire :
- un bouton qui redirige vers un formulaire au click
- un formulaire qui appelle le back pour pré-remplir les champs avec les données existantes
- le bouton submit
du formulaire qui appelle le back pour updater le film
🙋♀️ Checkpoint time 🙋
Appelle-nous pour qu'on valide cette partie !!️
Maintentant tu peux faire la page admin :) !