IONIC Section 5 - 5.7 Utilisation de fonctions Angular sur des components Ionic

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, maintenant nous revenons à notre page « recipes.page.html», ou on souhaite afficher une liste donc on va remplacer notre paragraphe pour insérer un « ion-list» dans laquelle nous souhaitons y insérer quelques éléments, quelques recettes. Bien sur, nous n’avons pas encore de recettes nous nous en occuperons plus tard. Donc pour l’instant, on va creer un fichier « recipes.model.ts» pour définir comment une recette doit ressembler et je vais utiliser une interface qu’on nommera « Recipe» avec « export interface Recipe {« , et on va faire mettre un ID à nos recette de type string « id : string», mais aussi un title, une imageUrl, puis certains ingrédients comme des bananes, des pommes par exemple. Il s’agit de quelque chose que vous n’avez sans doute jamais vu, c’est une fonctionnalité de typographie, nous définissons une interface, nous pouvons l’utiliser comme notre propre type et nous pouvons nous assurer que nous travaillons toujours avec les mêmes données de structures dans notre application. Donc avec notre fichier « recipes.page.ts» on va pouvoir modifier l’interface de recettes, nous allons ajouter une propriété de recettes qui est de type tableau afin de regrouper toutes nos recettes à l’intérieur avec « recipes : Recipe[] = [];» ainsi que notre modèle. Ce type doit donc être importé à partir du fichier du modèle de recettes, on ne va pas laisser ce tableau vide, on va plutôt remplir ce tableau qui contiendra quelques recettes qui auront un ID, comme « R1 » par exemple, un title « Escalope Viennoise», une imageUrl « pour cela vous pouvez copier l’URL de votre image correspondant à votre ingrédient et vous l’insérez comme ceci, et pour finir on va saisir les ingredients : [‘Frites’, ‘Viande de Porc’, ‘Salade’]. On va pouvoir ajouter une nouvelle recette, donc on copie la première puis coller ci-dessous notre deuxième avec un « Id:’r2’ »que nous allons modifier. Donc vous pouvez personnaliser en fonction de vos envies, je vais mettre ’Spaghettis’, je vais aller récupérer l’url concernant l’image, puis en ingrédients on va pouvoir mettre ‘Spaghetti’, ‘Viande’, ‘Tomates’. Une fois que nous avons créer nos 2 recettes, nous souhaitons les sortir dans notre « ion-list » et cela peut être fait en ajoutant un « ion-item », et comme je veux le répéter pour chaque élément de ma liste d’ingrédients, on va ajouter un « *NgFor =«let recipe of recipes» c’est une fonctionnalité Angular qui nous permettra de parcourir toutes nos recettes. Et on souhaite aussi afficher l’image, disons à gauche et à droite, on veut avoir notre texte. Pour cela, nous pouvons utiliser ce component « ion-avatar », ce component permet d’envelopper notre « ion-img » avec des optimisations comme par exemple le chargement de l’image seulement s’il est visible, donc lorsque l’utilisateur peut le voir. Donc s’il défile en dehors de la fenêtre d’affichage actuelle de l’utilisateur, cela ne sera pas chargé. Et on va lié cela avec des crochets « ion-img [src]=« recipe.imageUrl » et on va mettre un « slot=start » à notre « ion-avatar » de sorte que tout se retrouve à gauche. Et à coté de l’avatar, on va mettre un « ion-label » qui enveloppera notre texte avec une interpolation de chaîne pour afficher le titre de la recette en faisant {{ recipe.title }}. N’oubliez pas d’importer « Recipe » dans votre fichier « recipes.page.ts » juste au dessus avec import { Recipe } from ‘./recipes.model’; On va sauvegarder et nous obtenons cette application, ici qui donne un rendu assez agréable à l'aide d’Angular et Ionic, et se sera tout concernant cette vidéo.