Ajouter un film
On veut ajouter un bouton qui redirige vers un formulaire d'ajout de films. Tu peux tester en cliquant sur Nouveau film sur le site !
Création du composant
À toi de jouer ! 👾 Utilise Angular CLI via ton terminal
La commande est la même que celle utilisée pour générer le HomeComponent
; il faut juste lui donner le nom add-movie pour que le composant généré s'appelle AddMovieComponent
. Il faudrait qu'il se trouve dans le dossier existant movies
.
Nouvelle page = nouvelle route
On veut ajouter une route à celles existantes : /add-movie pour afficher le AddMovieComponent
.
À toi de jouer ! 👾 Ajoute une Route
dans la constante route de app.routes.ts
Le bouton
Pour ajouter un bouton dans movies.component.html
, on utilise la balise <button></button>
et on écrit entre les balises ce qu'on veut afficher dans le bouton : Nouveau film.
Normalement, il ne sera pas très beau.
Documentation
Tu as la doc pour voir comment customiser ton bouton avec Bootstrap.
Mais surtout, il ne se passe rien si je clique dessus ! 😬
Tip
Comme pour la balise <a></a>
du NavbarComponent
, on utilise le routerLink
.
C'est tout bon ! Cliquer sur Nouveau film
me redirige bien !
Implémentation du AddMovieComponent
Les formulaires
Tout d'abord, on ajoute notre titre entre des balises <h1></h1>
.
Ensuite, on a 4 champs de formulaire composés d'un <label>
et d'un <input>
.
On crée une variable movie de type Movie
avec ces 4 champs initialisés dans le add-movie.component.ts
, les autres champs sont mis à undefined
:
movie: Movie = {
title: '',
director: '',
releaseDate: new Date(),
synopsis: '',
id: undefined,
rate: undefined,
image: undefined
}
add-movie.component.html
et on te laisse faire les autres :
<div class="d-flex flex-column w-50">
<label for="title">Titre</label>
<input type="text" id="title" name="title" [(ngModel)]="movie.title"/>
</div>
Info
Pour utiliser ngModel
, il faut importer FormsModule
.
Les propriétés for
et id
servent à lier le label
et l'input
en HTML.
Le type permet de savoir quoi rentrer dans l'input, ici ce sera du texte.
Il existe un type date dans la balise input
si besoin.
Le bouton de soumission du formulaire
Maintenant, il faut recréer un bouton pour faire la soumission du formulaire.
Tu peux t'inspirer de celui déjà crée tout à l'heure.
Attention, celui-ci n'a pas le même comportement ! On n'a pas besoin de la partie routerLink
et on veut une fonction au clic sur le bouton.
Info
(click)
permet de détecter qu'à chaque fois qu'on clique sur le bouton addMovie()
c'est une fonction du TS qui est appelée à chaque clic.
Il faut alors définir la fonction addMovie
, sinon notre code ne compilera pas. On veut que la méthode fasse un appel POST au back en lui donnant le nouveau film à ajouter. On doit donc passer par le MoviesService
.
Au retour du back, on navigue vers la page précédente si l'ajout s'est bien effectué.
addMovie(): void {
this.moviesService.addMovie(this.movie).subscribe(
() => this.router.navigate(['/movies'])
);
}
Tip
Si tu ne te souviens pas comment injecter ton moviesService
, tu peux regarder dans home.component.ts
comment on l'avait fait.
Mais... Ça ne compile pas... Car dans notre MoviesService
il n'y a pas de méthode addMovie
! Hop, on la crée :
Et voilaaaaa ton AddMovieComponent
est terminé ! ⭐
🙋♀️ Checkpoint time 🙋