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: acad.link/ionic
Exclusive discount also available for my complete Angular course: acad.link/angular
Join our Academind Community on Discord for free: / discord
Check out all our other courses: academind.com/learn/our-courses
----------
• Go to www.academind.com 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: / academind_real
• Join our Facebook community on / academindchannel
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!

[@SEMDOCTORS]

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 🙏🙏

[@aravindkannan01]

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

[@AkJakolantern]

The real G

[@LeonardoRuosoVendramini]

só agradece.

[@chrisraines706]

Thanks for this. You are awesome!

[@pepis6000]

OK merci merci oo

[@RankitSinghThakur]

file=index.html,pages%2Ftabs%2Ftabs.html,app%2Fapp.html,app%2Fapp.module.ts,pages%2Ftabs%2Ftabs.ts,app%2Fapp.component.ts,pages%2Fhome%2Fhome.ts,pages%2Fhome%2Fhome.html

[@denisdragomirik]

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

[@MrArmyzero]

hahahah wth thats fast

[@jorgecristianfernandez2003]

Best course ever and for free! congrats thanks for this man!

[@Usgshshs]

no need to study masters when youtube is the best university ,thanks for this tutorial

[@niclas9671]

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!

[@KazpinGaming]

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.

[@NevesinjeGun1875]

I was playing the video several times over and was just going nuts about it cause i got everything the same as in the course but it wouldn't update the list after deleting an item from it. So here comes a question - if Max isn't using "ionViewDidEnter" how come his list gets updated????

[@mxc8469]

@mkultr730 recipes.page.ts: add : ionViewWillEnter() { this.recipes = this.recipesService.getAllRecipes(); }

[@paulovinicius9940]

@@mxc8469 Nope, this does not work.

[@thomasclague595]

@@mxc8469 Thanks for you answer, this worked for me

[@Izzkhairable]

@@mxc8469 Thank you so much!

[@spragucm]

I appreciate that you made so much of this excellent course free on KZbin, 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!

[@psalm2326]

can you share with me his udemy course🙂🙂

[@RankitSinghThakur]

file=index.html,pages%2Ftabs%2Ftabs.html,app%2Fapp.html,app%2Fapp.module.ts,pages%2Ftabs%2Ftabs.ts,app%2Fapp.component.ts,pages%2Fhome%2Fhome.ts,pages%2Fhome%2Fhome.html

[@sfriend-oy5zw]

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 😊.

[@srinivasanramu989]

A man with god heart teaching such a nice course free of cost. Huge respect sir !!!!!

[@jenandjuice]

"I do expect this basic knowledge at this point" --- LOVE IT!!!

[@stopPlannedObsolescence]

But React is better

[@fokklz]

@@stopPlannedObsolescence who asked?

[@jrldtlld]

A time stamp for the course outline would be great. Thanks for this, cheers!

[@adeyemosamuel2966]

You are nothing but a blessing to this world...Thanks

[@academind]

I don't know what to say but THANK YOU for such a wonderful comment Adeyemo!

[@danielrocha5774]

I agree.

[@MurilloVieira]

Are you some kind of divinity or god? 4h Ionic MASTER course, lol, you've killed it!

[@phpier]

I'd love to thank you and wish you keep going forward with such great courses

[@johannesdrechsler8585]

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?

[@ubikhan6079]

keep this up !! you will shine. Thank you

[@rodrigoespinozadev]

Gracias Max i have been waiting for this one! Here some beers for you!! 🥨🍺🍺

[@academind]

Thank you for your support and the beers Rodrigo :)

[@manuelserrano2511]

Really really thanks for this that's what i needed for my 1st job now while im on "practice contract" love ya

[@academind]

Thank you Manuel, happy to read that the video was helpful!

All the questions in my mind has been answered. Thanks a lot.

[@chen20032]

Great course, thank you Maximilian!

[@muhammadzohaib663]

some options changed in ionic in 2020 but soooooo easy way to learn, thank you soooo much

[@stanleykam6367]

Great explanation by breaking down the concept !

[@victorenrique1019]

Awesome tutorial. Loved it!

[@InsipidTawfiiq]

Made my first Ionic app watching this video. Thanks 😁

[@junelljacinto2309]

I landed my 1st job by having your name indicated as my trainor in resume 😁

[@academind]

Wow, congratulations Junell, that's awesome!

[@idlevandal69]

That's awesome!!!!

[@hazlotumismo1419]

That is a good point, more than 4 years wasted at the university... =(

[@mashoodkiyani3992]

@@hazlotumismo1419 hahaahh yes i can understand .....

[@kim_nguyen_]

congrats dude!

[@y.5107]

I am half way through and it's really awesome. Weird to get taught by a German guy in English while I am german too :). I actually may end up buying the course but 35hours is a bit daunting. Btw: Really needed the 1.5 speed up so far. How can I see which courses are already covered by this preview on the actual acad site? Some courses are indicated with preview but it seems this video offers more material.

[@user-gu5ts5nx8r]

I really love the way you explain and split things into a simple and understandable pieces. Thank you so much.

[@danielrocha5774]

You are the best Max!

[@afolabiosinowo7474]

Thanks for making the world a better place bro!

[@Vietnamcamping89]

Very detail, and clear thank you :)

[@moazelsawaf2000]

Thank you so much, I have just learned Ionic and some Angular basics from you just as I have advanced my Flutter skills by your course! ❤❤ Great content as always, please keep it up 🙏🏻❤

[@user-ci3bq8kp4m]

Loves your hard work.. just started to watch ..

[@ayshakhan3125]

My last lecture was like adding methods on the alert function in class but you explained it much more nicely keep it up

[@fulltimegamers]

If it's JavaScript related thing I know whose course to consider my all time favourite tutor max

[@azeemsyed0]

Thanks for the tutorial!

[@johngeronimo8821]

Hi in 3:17:20 I guess I have a problem. The deletion of Recipe Item is functional in Recipe-Detail but the the Recipe Item that I deleted is still exists in Recipe.ts (The List of Recipes).

[@jean-marcspat5126]

Your course was wonderful for me. I learnt a lot and have many new ideas. Thank you very much for your time and to put this free!

[@academind]

Glad it was helpful!

[@saminserge2674]

Many thanks, dear, this beginner course is very amazing!

[@vikasnigam9646]

Simply Awesome.. You are really so good in knowledge and the way you teach is unparallel

[@albertoarielarce2982]

Thank a lot Max!

[@umaima749zulfiqar6]

thank you for creating such a great course

[@sugandhasingh8752]

Very precise and good content.. thanks man❤️

[@user-pf6jw1ny6k]

thank you , very good tutorials. Did you prefer flutter or ionic for a native android / ios developer?

[@danielruiz2679]

I have no idea of angular and with this tutorial I have learned a lot of it (also of Ionic of course)

[@buggycoder7900]

You and Mosh are real gem!! Ty for this crash course.

[@academind]

Thank YOU for your awesome feedback!

[@md.akib5124]

1:40 who am i?!!! ... oww really!! c'mon we all know that.. you are king of the kings in the realm of web development. A master, a high level guru, a super expert of mobile apps development (be that hybrid, native), data science and many other things. Words can't express the gratitude the community has for you. You put a huge contribution for us. The more i watch your video the more i realize that knowing you is also like swimming in the endless study of programming field

[@academind]

I have no words for such kind words, seriously. Reading this honestly means a lot to me and I'm really thankful for the support from you and the others here on the channel and on Udemy :)

[@TheAlasunna99]

6

[@TheAlasunna99]

T

[@TheAlasunna99]

7þ7

[@TheAlasunna99]

Þþ7

[@shaikshavalisyed2012]

Excellent explanation. Thanks a lot.

[@ruznyahamed874]

Wooow really nice to have it thanks Max! We ever support you

[@academind]

Thanks a million for your support Ruzny!

[@yamansehzade7711]

thanks max !

[@Lexnem515]

great tutorial!

[@moegreen8543]

Max is Number One for me! )

[@IldarIsm]

Maximilian is a very positive man.

[@dertuman]

I was getting an error with the routing using the syntax provided in the video, here's how I fixed it. const routes: Routes = [ { path: '', redirectTo: 'recipes', pathMatch: 'full' }, { path: 'recipes', loadChildren: () => import('./recipes/recipes.module').then( m => m.RecipesPageModule), }, { path: 'recipes/:recipeId', loadChildren: () => import('./recipes/recipe-detail/recipe-detail.module').then( m => m.RecipeDetailPageModule) } ]; Thanks for yet another great tutorial!

[@puneettripathi8418]

you can click on the more button in chrome developer tools on the mobile toggled screen and select show device frame, it will also give you a full iPhone look with its body frame. It seriously looks dope, you should try it

[@vjeraturk]

1:16:05 Useful tip for getting auto-completion back ( in this case turning link in self-closing tag)

[@nipunvats4536]

sir i don't understand why your have less subscribers, you deserve more. Thank you so much for such a great video

[@academind]

More would always be better Nipun but we are so happy with the support we get from you and many others already, thank you :)

[@ozanyaravindranathan2726]

Thank you so much, sir I don't have any knowledge of Ionic and I don't have any idea about it But you explain it very clearly and I understood and all your steps are very clear

[@alexandramakarova4943]

Thank you so much for your effort! I've already bought your course and it's great!

[@academind]

Awesome, thank you!

[@aayo_gorkhali]

alexandra maxi is looking for a bride!!

[@thehimalayasingh]

Excellent crash course 👌👌 Max is a great instructor, he is my personal favorite for technical courses, his Angular course on Udemy is awesome..

[@elhadjibrahimabalde1234]

way, very nice introduction. thank you very mutsh

[@ShuToshio]

1:33:45 wasn't able to get the text to be aligned using this method, but I used class="ionic-text-end" and class="ionic-margin-vertical" and it worked. There's no more ion-alert-controller in the docs.

[@TheArtofCodeIsCool]

I had to add class='ion-text-end ion-margin-vertical' NOT ionic-text-end etc.

[@adityajain5135]

This is Gold. Keep doing awesome work.👍👍

[@academind]

Thank you so much 😀

[@FlorianLagg]

It really boosted understanding to see Ionic without using Angular, great approach!

[@academind]

Great to hear!

[@mario33067]

Very useful guide!!!

[@NotASpyReally]

This is power in video format. I love this.

[@darshankoshiya1835]

You are the BEST instructor on this Earth....

[@academind]

Wow, thanks a million for your wonderful feedback, this honestly means a lot to me!

[@djjavvystark5470]

Thank you so much, you are the best.

[@oshancc]

This is great . Thank you sir

[@carlosgaleanohn]

Just amazing I will buy the course! TY

[@academind]

Thanks a lot for your support Carlos, I hope that you will also like the full course :)

[@ijasdeen3809]

May god give you very very long life

[@Frank2tek]

He is the best teacher of the World . He really has an Academind :-)

[@academind]

Haha, thanks! I have the best viewers, too :-)

[@abdulnafay72]

Omg dude the recipe, recipe, recipe, recipes goes over head.

[@shirinehadi4422]

Thank you so much!!!

[@aabid3375]

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 :)

[@academind]

Wow, thank you very very much for this wonderful feedback Abidul!

[@shakyaashim306]

I followed everything step by step, however, when i run the app on XCode my app shows a blank white screen. How do i debug/resolve this ?

[@user-uz7tr4mc7v]

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.

[@speedrouter9]

thanks a lot!!

[@raitasorin]

I love it bro well done ya da best on Planet

[@acuteclub7381]

U r God dammed amazing. . . I’m a true fan. .. keep up the good work

[@dimitriyameogo5303]

great.thanks a lot

[@mdjasim3722]

I purchased your angular, reactjs, nodejs You are my one of the favorite tutor in my whole life, Thanks Max from 🇮🇳

[@academind]

I really want to thank you for your amazing support here and on Udemy, greetings from Germany :)

[@cristinapase]

Great tutorial, thank you!

[@academind]

Happy to read that Cristina, thank you!

[@minimalistdeveloper]

Today I completed after starting this course 5 days back and just now bought the course. Three tips for someone starting today: 1. use ionViewWillEnter lifecycle event to load filtered recipes when you are deleting a recipe 2. With ionic 5, starter template is changed a bit in the modules part. So, configure these new route modules instead of the app routing module and everything will still work same. 3. If you are unable to see edit configurations, in the android studio after launching it, then remove Android and www folders and remove the ionic.config.json and capacitor.config.json. Then restart these steps again (ng build, capacitor copy, capacitor run).

[@make-a-game-com]

Thanks a lot!!

[@sushilsunuwar1807]

Can you please make a video on how to ng-package ionic 4 app specific module and create a library in umd format? I want to host this umd in server, so that I can dynamically load these modules in client ionic app.

[@edidiongudo436]

Thanks so much great tutor

[@longsokleang1578]

Great done video, I learned a lot from this video. Thanks

[@academind]

Thank you :)

[@abhishektailor8401]

Please can you explain that how to show an app chooser in ionic 4?

[@mihaipupaza6006]

Nice Course!!

[@sukruberkay4924]

any mention about android studio and gradle ?

[@BitchBros]

How could I validate email adresses using this form example? Could anyone please help?

[@4wobi]

This content is so good!

[@assanesambagueye4132]

Thank you!!

[@johannesschnapp3414]

Really Great Job! Thank you! Directly bought your Udemy Course!

[@academind]

Wow, thanks a lot for your awesome feedback and support Johannes, great to have you on board of the course!

[@Sznur69]

Great tutorial. Is it possible to make multiple page routing in vanilla Ionic? Could you point me to a working example?

[@brianjacob8728]

Max, I enrolled in your full-blown Ionic-Angular course and got a lot out of it. I'm thinking of converting one of our AngularJS apps to Ionic, but I had a few questions I'm hoping you could answer before I take the plunge. 1) Are you able to develop Ionic/Angular apps in Visual Studio 2019? My shop already uses this platform and I'd prefer to not introduce the VS Code platform unless it is required/really highly suggested. Assuming VS2019 is possible, what niceties from VSC would I be giving up? 2) Our back-end is written in C#.NET using SQL Server 2016 and I have to continue using these. Therefore, I'd like to keep the back-end code changes to a minimum while still being able to implement the Ionic/Angular/TS changes on the front-end. What are your recommendations here? Again, really loved your course (I also went through your TypeScript course, as well) and really enjoyed your teaching style.

[@parrou3]

very excited to take this course, Angular will make his Remontada , thanks to Angular Ivy expected next quarter Angular apps will be faster and smaller

[@yahyeabdirashid9716]

my hero LOVE YOU BROTHER THANKS ALOT

[@avinashtester8868]

Nice Explanation! Keep making new videos and help peoples...