Bienvenue sur CodeWise ! Si vous êtes nouveau ici, vous voudrez sans doute découvrir notre Starter Kit Angular : il contient une roadmap du parcours d'un dev Angular, ainsi qu'un cookbook des commandes les plus utiles et un extrait de formation. Cliquez ici pour le télécharger (c’est gratuit !)
Vous souhaitez formatter vos strings et vos tableaux drirectement dans le template ? Dans cet article, découvrez comment utiliser le pipe slice d'Angular.
Que fait le pipe slice ?
Le pipe slice est fourni par Angular et appartient au CommonModule.
Pour fonctionner, le pipe slice utilise les fonctions JavaScript Array.prototype.slice() et String.prototype.slice().
Concrètement, le pipe slice va vous permettre de récupérer une portion d'un tableau ou d'une string, sans modifier la variable de départ.
Pour être précis, voici des extraits de la documentation de l'API JavaScript.
- Pour un tableau : "La méthode slice() renvoie un tableau qui contient une copie d'une portion du tableau d'origine."
- Dans le cas d'une string : "La méthode slice() extrait la portion explicitée et la renvoie sans pour autant modifier la chaîne originale."
Dans quel cas utiliser le pipe slice ?
Vous souhaitez afficher un aperçu d'article sur la page d'accueil de votre blog ? Ou bien vous souhaitez afficher les 5 premiers éléments d'un tableau d'articles sur votre site e-commerce ?
Pour ce genre de cas (et bien d'autres), utilisez le pipe slice !
Il vous évitera de créer des attributs calculés dans vos composants, ou encore des fonctions de formattage.
Comment utiliser le pipe slice ?
Pour commencer, voici la syntaxe du pipe slice :
1
{{ stringOrArray | slice: 1 : 4 }}
On utilise le pipe slice sur une string ou un tableau suivi du paramètre start (obligatoire) et du paramètre end (optionnel).
1er paramètre : start (index de départ)
- start < taille de l'input ? Le pipe renvoie les éléments à partir de l'index start
- start ≥ taille de l'input ? Le pipe renvoie [] ou ""
2ème paramètre : end (index de fin)
- Si end n'a pas été fourni, le pipe renvoie le tableau ou la chaîne depuis start jusqu'à la fin.
- end > start ? Le pipe renvoie la portion allant de start à end.
- end < start ? Le pipe renvoie [] ou "".
À noter : On peut utiliser des index négatifs ! Dans ce cas, ils sont comptés à partir de la fin de la chaine (index < 0 ? index = taille + index)
Exemples
1
myString:string = "abcdef";
slice.component.ts
Avec start > 0 :
1
2
{{ myString | slice : 1 }}
// Output : bcdef
slice.component.html
Avec start < 0 :
1
2
{{ myString | slice : -2 }}
// Output : ef
slice.component.html
Avec start > 0 et end > 0 :
1
2
{{ myString | slice: 1 : 4 }}
// Output : bcd
slice.component.html
Avec start > 0 et end < 0 :
1
2
{{ myString | slice: 3 : -1 }}
// Output : de
slice.component.html
Conclusion
Voilà tout pour le pipe slice ! j'espère que cela vous aura plu et simplifiée sa compréhension.
N'hésitez pas à laisser un commentaire !
Sources
- Angular - Pipe Slice
- MDN - Array - Array.prototype.slice
- MDN - String - String.prototype.slice
Téléchargez votre Starter Kit Angular
En souscrivant vous recevrez :
- Une roadmap d'un développeur Angular
- Un cookbook Angular des commandes les plus utiles
- Un extrait de formation
100% gratuit.
Auteur
