Ionic 4 & Angular Tutorial For Beginners – Crash Course
Learn to build iOS, Android and web apps from scratch with Ionic 4 and Angular!
Join the full Ionic + Angular course:
Exclusive discount also available for my complete Angular course:
Join our Academind Community on Discord for free:
Check out all our other courses:
———-
• Go to and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram:
• Join our Facebook community on
See you in the videos!
———-
#ionic4 #ionic4course #ionic4tutorial #ionic4app
———-
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
00:00 Section 1 – Getting Started
02:29 Introduction to Ionic
04:09 Progressive Web Apps (PWAs)
05:20 Ionic Platform
10:14 Understanding the Ionic Ecosystem
11:22 An Ionic Project
14:41 Angular – Brief Introduction
18:40 Ionic Installation
20:48 npm install -g ionic : Global Installation of Ionic
21:50 ionic start : Start a simple ionic project
24:49 VSCode: IDE of choice
27:58 ion-button addition to simple ionic project
31:40 Ionic History
35:39 Ionic 3 vs Ionic 4+
38:47 Compiled or Web View?
41:00 What’s a “WebView”?
42:30 Course Outline
49:00 How to get most out of the course?
51:56 Section 2 – Angular refresher [Skipped]
52:08 Section 3 – Working with Ionic Components
53:25 Core Building Blocks
57:52 Using the Ionic Components
1:00:15 How do Ionic 4 Web Components Work?
1:04:45 Simple Ionic app build with Ionic CDN
1:10:15 Basic Layout: Budget Planner
1:15:35 ion-content: Budget Planner
1:18:51 Core component types
1:21:20 ion-grid: Budget Planner
1:28:40 ion-icon: Budget Planner
1:34:33 app.js: Logic of Budget Planner using Vanilla JS
1:41:30 app.js: Rendering a dynamic List
1:46:35 app.js: Clear input
1:48:05 app.js: Total expenses
1:52:30 ion-alert: Why Angular over Vanilla JS?
1:58:11 Assignment: Course Rating
1:59:55 Assignment Solution: Course Rating
2:14:01 Why Angular?
2:17:48 Section 4 – Adding Angular (or any Framework)
2:27:57 Project Layout Walkthrough
2:33:57 @ionic/angular Wrapper
2:37:51 Simple ionic dummy app
2:39:27 recipes: Page generation
2:44:20 recipe: Model
2:49:20 recipes/recipe-detail: Page generation
2:52:30 recipes/recipes: Service
2:57:10 recipesService Injection into RecipesPage
2:58:50 recipesService Injection into RecipeDetailPage
3:03:12 recipe-detail.page.html Designing
3:07:24 Routing from recipe.page.html to recipe-detail.page.html
3:14:08 recipe: Deletion
3:17:26 ion-alert-controller: To alert before deletion
3:21:40 recipe-item: angular component
3:25:13 Angular Components & Ionic Components
3:27:27 Section 5 – Running the App on Mobile Devices
3:29:53 Android Development
3:35:55 Android Running with Capacitor
3:40:17 Android Live reload
3:42:28 iOS Development
3:49:49 iOS Live reload
3:52:43 Closing remarks
só agradece.
The real G
Compleated an ionic project for a client just by watching this video. You have saved my job and most of all you taught me a valuable skill. Thank you ??
Absolutely awesome tutor!You are amazing,so clear and concise..I love your videos and never miss out!God bless you for sharing the excellent course ?.
Thanks Max, you did it again! After building my first business application in angular (watching your angular course) you once again have the right followup course to help me get to know yet another world. Grüße aus dem Süd-Westen!
Thank you! I am not native English speaker, but you one of that rare people who I can listen on x2 speed. Very clear speech! And understandable detailed material of the course
hahahah wth thats fast
Great video! Just not enough list with timelines like a “5:18 – Ionic Platform” in the description. It will be very convenient for people who are only interested in the theme of ionic application styling. I hope the author listens to advice.
I’d love to thank you and wish you keep going forward with such great courses <3
I appreciate that you made so much of this excellent course free on YouTube, and that you didn’t stop short on the actual deployment instructions.
As a thank you, I purchased the full course on Udemy 🙂
Keep it up!
can you share with me his udemy course??
A time stamp for the course outline would be great. Thanks for this, cheers!
Thanks for this great tutorial! I´m starting coding and I was playing with this example app. I was wondering, if I have different ‘id’ formats, for example, (r1,r2,r3) and also (p1,p2,p3), how can I show only recipes which id’s contains the ‘r’?
You could, for a start, create a different method that only returns the ‘r’ type of recipe: Let’s say getAllRRecipes(). In it you filter the content of the recipeId using the ‘.filter’ JS method. Something like:
getAllRRecipes() {
const reg = new RegExp(‘r\d’, ‘im’);
return […this.recipes.filter(recipe => {
return reg.test(recipe.id);
})];
}
And here I’m using regex to verify if the id has the ‘r’ on the beginning, but you could do it using string comparisons as well.
Best Regards and happy (also, patient) coding 😉
My last lecture was like adding methods on the alert function in class but you explained it much more nicely keep it up
Well i took two of your courses on udemy and they were seriously amazing….keep up these kind of work…may God give you better health and peaceful life 🙂
Wow, thank you very very much for this wonderful feedback Abidul!
A man with god heart teaching such a nice course free of cost. Huge respect sir !!!!!
Very precise and good content.. thanks man❤️
I’d like to point out that in 3:20:40
If you notice that your data table isn’t being updated, it is because ngOnInit doesn’t trigger if it was previously viewed.
I suggest you use “ionViewDidEnter” lifecycle hook when using real API calls after data manipulation from another component.
@M Xc Thank you so much!
@M Xc Thanks for you answer, this worked for me
@M Xc Nope, this does not work.
thanks man
@M Xc oh!!!! my dear friend. you do you so much for me with this comment.
Hello, Max. Thanks for your effort in making this course. I have a doubt around the 3 hour mark of the course when it comes to deleting a recipe. I’ve followed your code to the letter as far as I’m concerned. And while the click event handler does as it’s supposed to and deletes the recipe when you click the trash icon, and the router navigates back, to the recipes page, my list still shows the deleted recipe on the recipe list. I can click on it, and of course it brings me to a blank recipe since it WAS deleted, but the page before is not aware of it somehow.
Did I mess something up? Should I be communicating to the Recipes component?
@Mar Same problem here. Your fix works like charm. Thanks
@Mar THANK YOU! It works. I was able to debug it, but I suck at angular and unsure how to “force reload” on the recipe array. I am glad I didn’t repost this issue. TIL ionViewWillEnter() – thank you! 🙂
@Mar You are awesome! I got the same issue and fixed them with your resolution.
but don’t understand why it’s working in the demo.
An excellent course by a brilliant teacher! I also bought the Udemy course.
Keep up the good work Max!
May I ask if it would be possible to create a shorter/more compact course for Ionic 4 and Vue.js?
Thanks for your awesome feedback and support Panos, happy to have you on board of the course. Unfortunately I don’t plan to create an Ionic + Vue course at the moment, sorry :/
Excellent crash course ?? Max is a great instructor, he is my personal favorite for technical courses, his Angular course on Udemy is awesome..
I really love the way you explain and split things into a simple and understandable pieces.
Thank you so much.
Very detailed video! Thank you very much! Will animations run at smooth 60 fps after building the app with capacitor? How would you compare the performance with a native app and a native app created by the capacitor?