Débutez avec Angular

Générez un nouveau component appelé SingleFaceSnapComponent, et transposez-y tout depuis FaceSnapComponent : template, TS et styles.

Vous pouvez dès maintenant créer la route qui appellera ce component. Il faut que l'on puisse y passer un paramètre dynamique, c'est-à-dire le segment de la route qui contiendra l'id  du FaceSnap, et qui sera donc dynamique. Voilà comment faire :

const routes: Routes = [
  { path: 'facesnaps/:id', component: SingleFaceSnapComponent },
  { path: 'facesnaps', component: FaceSnapListComponent },
  { path: '', component: LandingPageComponent }
];

Les  :id  spécifient que ce qui se trouvera après  facesnaps/  correspondra à un paramètre qui s'appellera  id.

Maintenant, si vous essayez de naviguer vers, par exemple, http://localhost:4200/facesnaps/1 (où  1  est un  id  valable), vous aurez :

Bien sûr ! On n'a aucun moyen de passer un FaceSnap au  @Input()  de ce component, car c'est le Router qui l'insère !

Heureusement, nous avons une solution !

Afin de récupérer les informations de la route activée, vous allez injecterActivatedRoutedans SingleFaceSnapComponent, sans oublier d'enlever le décorateur  @Input()  de la propriété  faceSnap  :

export class SingleFaceSnapComponent implements OnInit {
  faceSnap!: FaceSnap;
  buttonText!: string;

  constructor(private faceSnapsService: FaceSnapsService,
              private route: ActivatedRoute) {}

Ensuite, dans  ngOnInit(), vous allez pouvoir récupérer le paramètre id via le snapshot de la route (un snapshot est un aperçu instantané d'une valeur qui change au cours du temps) :

const snapId = +this.route.snapshot.params['id'];

Avec cet  id, vous pouvez appeler la méthode  getFaceSnapById()  du service pour récupérer le FaceSnap correspondant :

this.faceSnap = this.faceSnapsService.getFaceSnapById(snapId);

Maintenant, si vous naviguez vers votre route avec un  id  valable :

Pour compléter l'application, et permettre à vos utilisateurs d'accéder à cette nouvelle route, je vous propose de modifier FaceSnapComponent pour n'afficher que le titre et la description des FaceSnaps, et d'y ajouter un bouton qui permet d'ouvrir le FaceSnap dans la nouvelle route.

Du coup, le template donnera :

<div class="face-snap-card" [ngClass]="{ snapped: buttonText === 'Oops, unSnap!' }">
  <h2>{{ faceSnap.title | uppercase }}</h2>
  <p>{{ faceSnap.description }}</p>
  <button (click)="onViewFaceSnap()">VIEW</button>
</div>

Je vous laisse quelques instants pour tenter d'implémenter  onViewFaceSnap(), sans indice cette fois-ci.

…

…

Voilà ma solution. Il faut bien sûr injecter le Router, et utiliser sa méthode  navigateByUrl()  :

onViewFaceSnap() {
    this.router.navigateByUrl(`facesnaps/${this.faceSnap.id}`);
}

Comme ça, votre page FaceSnaps ressemble à ça :

Et les boutons VIEW vous amènent vers les routes SingleFaceSnapComponent. Du coup, tout ce qui reste, c'est de mettre un lien ou un bouton Back dans SingleFaceSnapComponent pour permettre un retour en arrière facile, mais attention au piège !

<!-- ... -->
<h2>{{ faceSnap.title | uppercase }}</h2>
<a routerLink="/facesnaps">Back</a>
<!-- ... -->

Avec ces dernières fonctionnalités, votre première application Angular est terminée !

• On récupère les paramètres de la route activée en injectant ActivatedRoute, et via son objet  snapshot.params.

• Pour naviguer vers une route absolue (et non relative), n'oubliez pas d'ajouter un  /  au début de la route demandée.

• Vous avez centralisé données et logique dans un service que vous avez ensuite injecté dans les components concernés.

• Vous avez ajouté un module de routing à votre application, et trois routes fonctionnelles.

• Vous avez mis en place deux systèmes pour que vos utilisateurs puissent changer de route : les routerLinks et le Router.

À la fin du quiz qui suit ce chapitre, vous aurez terminé ce cours d'introduction à Angular ! Vous avez déjà appris beaucoup de choses. Mais ce n'est pas fini ! Après le dernier quiz, je vous partagerai comment poursuivre votre apprentissage du framework Angular...