Comment ajouter un défilement infini à votre application Angular

Pour commencer à construire l’application, nous commençons par installer le CLI Angular en exécutant npm i @angular/cli. Après l’avoir installé, nous exécutons ng new image-gallery pour créer un nouvel Angular pour notre application de galerie d’images. Nous créons également un magasin Flux pour stocker l’état du menu.

Puis nous installons les bibliothèques pour l’app. Nous exécutons npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store pour installer les bibliothèques dont nous avons besoin pour afficher les photos et montrer le diaporama de photos. Puis nous exécutons ng add @ngrx/store pour ajouter le code.

Puis nous ajoutons le code squelette pour le code que nous allons écrire. Pour cela, nous exécutons les commandes suivantes :

ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo

Ceci va créer les composants utilisés pour l’affichage. La classe httpReqInterceptor est utilisée pour attacher la clé API à l’en-tête de chaque requête. Le service photo est l’endroit où le code pour faire les appels à l’API Pexels résidera.

En environment.ts, nous avons mis pour nous permettre d’importer votre clé API à d’autres fichiers.:

export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};

En http-req-interceptor.ts,nous ajoutons:

Cela attache notre jeton à l’en-tête de requête Authorization de chaque requête avec ce bloc:

let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});

En photo.service.ts, nous mettons:

Cela nous permet de faire les requêtes à l’API Pexels. Nous avons utilisé les photos conservées et le point de terminaison de recherche avec la pagination dans notre application.

Puis dans home-page.component.ts, nous mettons:

C’est là que nous obtenons les photos du point de terminaison des photos conservées, situé ici, pour obtenir les URL des images en appelant map sur le champ photos de la réponse.

Si un terme de recherche est entré, nous utiliserons le point de terminaison des photos de recherche ici et ferons la même chose avec la fonction map. Nous avons un défilement infini, donc lorsque l’utilisateur défile vers le bas de la page, nous augmentons le numéro de page et continuons à ajouter plus d’URL d’images à notre tableau.

En home-page.component.html, nous mettons :

Cela montre le formulaire de recherche et enveloppe notre grille de photos dans un défilement infini div afin qu’il charge de nouvelles images lorsque l’utilisateur défile vers le bas.

infiniteScrollDistance est le pourcentage de la position de la page depuis le bas de la page, donc 2 signifie que le défilement infini sera déclenché lorsque nous aurons fait défiler 98% du contenu actuel de la page.

infiniteScrollThrottle est le nombre de millisecondes jusqu’à ce que le défilement infini soit déclenché après que l’utilisateur ait arrêté de défiler. Le scrolled est déclenché lorsque l’utilisateur fait défiler la page vers le bas. Ces éléments sont tous facultatifs et peuvent être ajustés comme vous le souhaitez.

En home-page.component.scss, nous ajoutons :

.tile-image {
width: 100%;
height: auto;
}

Ceci fait que les images remplissent la case de la grille.

En random-slideshow-page.component.ts, on met:

C’est ici que l’on récupère les photos aléatoires depuis le point de terminaison des photos curatées.

En random-photos-page.component.html, on ajoute:

Ceci affiche le diaporama des photos.

Puis nous faisons un fichier appelé menu-reducer.ts et ajoutons ce qui suit pour stocker l’état du menu:

En reducers/index.ts, nous mettons:

import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};

Cela permet au StoreModule de @ngrx/store d’utiliser le réducteur de menu pour stocker l’état.

Dans app.component.ts, nous ajoutons:

Cela ferme automatiquement le menu latéral gauche quand on change de page et si on ne clique pas sur le bouton du menu. Nous obtenons l’état du menu dans le magasin, et si le menu doit se fermer par navigation ou en cliquant à l’extérieur du menu, nous basculons le menu à l’extérieur et définissons l’état dans le magasin.

Dans top-bar.component.ts, nous mettons:

Cela nous permet de basculer le menu et de stocker l’état dans le magasin.

En app.component.html, nous avons :

Cela montre le menu latéral gauche pour la navigation, et router-outletpermet aux utilisateurs de voir nos pages en cliquant sur les liens ci-dessus ou en tapant directement l’URL.

En app.component.scss, nous ajoutons :

#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}

Cela ajoute un peu de rembourrage et supprime les marges sur les pages.

Enfin, dans app.module.ts, nous mettons :

Cela inclut toutes les bibliothèques, l’intercepteur HTTP et les services dont nous avons besoin pour faire fonctionner l’application.

Finalement, nous avons ce qui suit dans l’app terminée :