Build Your First Food Website Using Angular Part 3 Adding Food List Images Angular Part

In this tutorial, we gonna add food images to the home page, you can see the changes of this episode in the Code Changes link below:. . 💻 Code Changes: https://bit.ly/2OZmFzy. 👨‍💻 GitHub: https://github.com/nasirjd/FoodMine. 💡 Demo: http://foodmine.herokuapp.com​. 📞 Contact: Jafarzadeh.nasir@gmail.com. . PARTS. – Part 00: https://youtu.be/UIWK5_DrZ7w​. – Part 01: https://youtu.be/bKRP4Iteb78. – Part 02: https://youtu.be/tnZ6BjSKtug. – Part 03: https://youtu.be/tnZ6BjSKtug. – Part 04: Next Tuesday. . YOU WILL SEE. – 00:00 Intro. – 00:16 Creating **HomeComponent** for showing the homepage items. – 00:44 Adding HomeComponent’s route to the router. – 01: 31 Adding router-outlet directive to the app.component.html. – 02:13 Adding food images to the assets folder. – 02:35 Creating a new service called **FoodService** for providing the list of the food images. – 03:37 Adding **getAll** function into the FoodService that gives us all the food images as an array. – 04:40 Injecting the FoodService into the home component. – 05:38 Adding **foods** property to the home component and fill it using the FoodService’s getAll function inside the **ngOnInit** hook. – 06:13 Using *ngFor in the home component template file for showing the images inside the view. —. Contact me:. 🔗 Website: https://codewithnasir.com​​. 🔗 Linkedin: https://www.linkedin.com/in/nasirjd​. 🔗 Github: https://github.com/nasirjd