How to Build Your First Ionic 6 App with API Calls

[@galaxies_dev]

Want more? Check out some real Ionic clones here: kzbin.info/aero/PLNFwX8PVq5q5K_ztYB5umsEu9p6SOQQSb Make sure to subscribe for more! kzbin.info_?sub_confirmation=1

[@indrajitruidas12]

Hi Simon , I was doing internship in a product based MNC. And I got tasks related to PWA , Push Notifications, Hybrid App Development etc . One senior suggested that with Ionic Angular these all things I could do . But I never worked with Ionic . Your Ionic videos helped me at each step , whenever I got stuck , you helped me at the very point . AND FINALLY I'VE GOT FULL TIME JOB IN THAT MNC . Can't thank you enough Simon ! Truely grateful to you ❤️. You helped me getting a good career opportunity.

[@galaxies_dev]

Wow that is so amazing to hear - congratulations on your job mate!!

[@karangupta7289]

This is one of the best videos I have ever found on Angular and Ionic learning for a beginner in this field! It's best to learn by building apps rather than by trying to only read documentation and not applying it anywhere. Thankyou! Will checkout all your videos!

[@galaxies_dev]

Thank you Karan! I think the same, seeing something practical in action and following along is a great way to get a feeling for how things work with Ionic - let me know when you encounter problems :)

[@dohoangnam9x]

A note at 40:42 If you use .push(...spread-array) like the video, you might need to have to manually trigger detectChanges for the component to reload the UI if you are using OnPush strategy (since the .push does not change the instance of the array, which makes Angular consider it as it was not changed).

[@galaxies_dev]

Thanks for pointing it out!

[@AntonGorbachevDev]

Or we can do this.movies = [...this.movies, ...spread-array] this trigger detectChanges automatically

[@sachinvarghese2223]

@@AntonGorbachevDev thanks for this

[@anggifergianp6566]

do you mean changeDetection: ChangeDetectionStrategy.OnPush ?

[@dohoangnam9x]

​@@anggifergianp6566 Yes, if the array you are mutating using .push() method (which keeps the array reference after mutating) is inside a component using ChangeDetectionStrategy.OnPush, Angular might not be able to detect it. The way @lastbreath2437 suggested is the correct way in that case. (Or you can manually trigger change detection using ChangeDetectionRef If I remember correctly).

[@emreaka3965]

I am gonna build a mobile app for my web project by following your video. Let's get started :D

[@galaxies_dev]

All the best for the project Emre!

[@bilalakkari7181]

Did u finish the app?

[@CITYBOY5950]

This video was great. Straight to the point with a real-example. That makes it really easy to understand without the extra fluff that steers us away from the basics

[@galaxies_dev]

Happy to hear - give it a share if you enjoyed it ✌️

[@asifequebal3021]

honestly the best soft tutorial ive ever seen. short and straight to the point ! i love it

[@galaxies_dev]

Thank you Asif 🙌

[@braveitor]

Fantastic video. Sometimes is good to get back to basics so we may fill any knowledge gap, as we sometimes do things without having very clear what we're doing. Nice one, Simon!

[@galaxies_dev]

Very true, and glad you enjoyed it David!

[@TheSharkbeast]

i cant explain how helpful your videos are !! please make more videos on react & ionic

[@galaxies_dev]

Thank you! Will do!

[@Dayogg]

Thank you for such a detailed and well made tutorial. It was a great starting point.

[@galaxies_dev]

Glad you enjoyed it!

[@CJvanNiekerk]

Thanks, really appreciate the time and effort you put into these videos ! They work and make the topic really simple to understand and follow - 100 thumbs up !

[@galaxies_dev]

Thanks a lot CJ - would help me a lot if you could share the tutorial on your preferred SM platform 🙌

[@CJvanNiekerk]

@@galaxies_dev will do - I have made a simple application to test the implementation using a custom jwt provider through Laravel 9 (php framework and very popular) and the ionic app - this is the base I will use for all my applications going forward - not sure if you would like me to share this with you at some point - good alternative to use if you don't want to make use of cloud providers like firebase ?

[@lucasneiva6679]

Congrats, Simon. Where is the source code? Please share the git repo with us

[@misteryegor]

Mate, this video is awesome! Thanks a lot for that!

[@galaxies_dev]

Thank you!

[@immanuel417]

Why Api Not Working if my project CRUD compile to android studio ?

[@suleman9674]

great work... this was a great tutorial for me as a beginner

[@ArthurASSOGBA-w7v]

Great Tutorial. Please how to make my ionic apk built with appflow and capacitor able to connect to my deployed api URL ? I'm getting an 0 unknow error issue

[@taraselegesiere5216]

Awesome video Simon, I have learnt a lot. Well done.

[@galaxies_dev]

Glad it was helpful!

[@antoniocorreiadev]

Great video, thanks!

[@galaxies_dev]

You're welcome!

[@danielmartinez-rr4rn]

Great video man!

[@galaxies_dev]

Glad you liked it!

[@AllenIve3]

Very good tutorial

[@galaxies_dev]

Glad you liked it!

[@rehamabmatrix2638]

thank you , done successfully ^^ , good job man !

[@galaxies_dev]

Glad I could help!

[@JOD8576]

Really amazing. Thanks

[@businessTech127]

very nicely explained with neat and clean code ! Keep Teaching 👍

[@galaxies_dev]

Thanks, I will 💪🏻

[@ankitakachalia2610]

Hello simon i want to integrate venmo payment in ionic then how to do it please provide some suggestion

[@werewolf4032]

Thank you So much. Sir can u make a search bar too, I need that to learn this ionic 6

[@galaxies_dev]

Sure I'll add this to my list!

[@vishnuvardhan.412]

Hi Simon...it's very helped to me. But I want to integrate .aar file which is generated using ionic/cordova and integrate with another third-party app. I have tried but getting issues with cordova plugins saying, class not found exception. Would you please suggest the approach ?

[@deepakjoshi4466]

Unable to see service page in my project do i need to add it manually or bya some command pls help

[@MarcosVinicius-gj6qg]

Simon, could you do a tutorial with resolutions of build issues and conflicts that ionic 6 is currently having with angular. It's been a headache. Thanks!

[@galaxies_dev]

What kind of build issues? I haven't experienced any problems with latest Ionic versions!

[@phunguyen6319]

I built this project and build it on android studio but when I turn on my app on my phone it lost images do you know how to fix it ?

[@ousmanediouf9190]

I have the same problem

[@fathanianas7298]

I have an issue with my code concerning the event when trying to implement infinite scrolling, it says that the event is of type event and isn't assignable to parameter of type InfiniteScrollCustomEvent

[@caiosales176]

Man, fantastic video, thank you so much! XD

[@galaxies_dev]

Glad you enjoyed it Caio!

[@cyberlord6406]

Please simon im having an error and I don't know how to solve it... Cannot find module 'is-docker'...

[@kumaravelanbu1017]

Do a video tutorial on background geolocation that get gps data for a x amount of time in ionic

[@facuchaer1]

Thanks for your time and effort. Just strated a proyect its been 5 years since My last one and your series comes really handy. I have a question maybe anyone can help figure out. I need to stream a live vídeo within My app. Tried using stream media wo success, is it worling on iónic 6 capacitor?

[@moleexr639]

thank u for shareing Ionic video

[@galaxies_dev]

My pleasure!

[@subithacharlet6769]

Hi sir, Am using rest api in my capacitor app , that's call fine and getting success response from brower , but in device that returns errorcode 0

[@rodrigoquiros2706]

Hi Sim, when i run * ionic cordova build ios * the terminal returns: Error unknow argument: platform

[@galaxies_dev]

Maybe because you are using Capacitor in your app?

[@vedantparchulkar708]

Thank you for this video. This is helpful. :)

[@galaxies_dev]

Glad it was helpful!

[@coderprakash]

Did ionic have same job opportunities compared to native iOS, Android and cross platform flutter, Reactnative which is having more opportunities?

[@galaxies_dev]

React Native has the most, followed by Flutter. The Ionic market is a lot smaller currently.

[@ravijatav1938]

Hi Simon I am trying to integrate paid api for voice and video calling in ionic Cordova app but unable to implement it. So will you please guide me for that how can I implement this. Please provide me a solution for that as soon as possible.

[@TUR595]

Hey Simon! Nice tutorial. I know its quite old for you now and hopefully you can answer. I have a problem with the movie types. If I define response as any in service file and movies as an array in page file. I am not able to do the spread operation onto movies because typescript complains "Type 'any[]' is not assignable to type 'never[]'". What could be the problem here?

[@galaxies_dev]

You can simply initialise the array as an empty array, that should fix the never warning!

[@thecasualgamer90]

Can we get a live project with Ionic + React?

[@galaxies_dev]

Sure, working on some React material already!

[@thecasualgamer90]

@@galaxies_dev Thank you so much Simon!!

[@lucasneiva6679]

Did you versionate the code? Can we access that?

[@galaxies_dev]

Link to the tutorial is below the video in the description!

[@SalehWolf]

Hello Thanks For Your Videos😍 Do you have any Video For PWA In Ionic? In IIS?

[@galaxies_dev]

Hey yeah you could check this: kzbin.info/www/bejne/foLbg3p_aZeJeqc

[@SuperiorTag]

Is Ionic free to build apps with and launch?

[@galaxies_dev]

Yes, 100% open source.

[@uncleike5230]

I am following the tutorial now and i do not have the app.module.ts file, should I create it ??

[@gbarbier69]

same issue, ionic 7 does not include the app.module.ts file i've been trying to find out where to declare the HttpClientModule without creating the app.module file but no luck

[@galaxies_dev]

They updated to Angular standalone components, check out my video about it: kzbin.info/www/bejne/j2HZeWh5oph7d80

[@souzaelvis3102]

got some problems with infinite scroll, `Type 'Event' is missing the following properties from type 'InfiniteScrollCustomEvent'` How i can solve this?

[@saskiafalken6350]

I had the same error and don't know why Simon Grimm didn't encounter the same error. Easy workaround: Declares the $event to be of type $any.

[@envygamer]

Could you please upload a Tutorial on configuring Android Studio and how the debugging works, I have been facing so many challenges when I try to load my web app as an app.

[@galaxies_dev]

I've got a guide on debugging here as well: ionicframework.com/blog/debugging-tips-for-your-ionic-app/

[@aogunnaike]

Awesome 😎 can I upgrade from ionic 5?

[@galaxies_dev]

Yes you can

[@aogunnaike]

@@galaxies_dev ok thanks

[@jesuseduardolealperez]

thank you bro thank you

[@galaxies_dev]

You're welcome!

[@tedkhieu8995]

I bought your ebook but I have problems running pizzaShop app on my laptop. I need to update npm. I deleted npm but having problems reinstalling it. Can you guide me how to completely uninstall node and npm so then I can install nodeJs fresh. I really enjoy going through the ebook. Thanks for putting out there.

[@galaxies_dev]

Please send me an email with the exact issues so I can take a look Ted!

[@tedkhieu8995]

@@galaxies_dev Will do thanks!

[@hernandohernandez4097]

Hello, greetings from Colombia. I have a request, is it possible to make a foreground service ionic class

[@TheSaceone]

The foreground service is a native feature of Android. In order to have that feature in your ionic application, you need to use a capacitor plugin or a cordova plugin. Thouse plugins expose to your application the native functionalities of the device like camera, file system, sensors, or, in your case, foreground services. Refer to the explanation of Simon in 55:02 The official documentation suggests this plugin: ionicframework.com/docs/native/foreground-service This is a cordova plugin, but worry not! If your ionic application uses capacitor, well, capacitor is capable of using cordova plugins too! (most of them). If this plugin doesn't fit your requirements, you can always build your custom plugin for capacitor. Simon has also a video about that topic: kzbin.info/www/bejne/hJeQnoKcoqlqjpY

[@chizuru1999]

Super good tutorial 👍🏻👍🏻. Idk angular just feels good even at work or for personal projects. Been hopping a lot on react / react-native / native / flutter / etc etc but ionic seems good along with ofc angular.

[@galaxies_dev]

Yeah feeling the same - it has a learning curve but projects tend to have a decent structure and you easily get into other peoples code as well with Angular!

[@AGUNGKAYA]

Sir you forgot to tell us why the opened android studio got error when syncing

[@paulh6933]

how about using a shortcut instead of ur if. i use e for event and i tested it with 3 pages max. not as read-able, as an if, but react devs do this e && (e.target.disabled = data.page === 3);

[@ConnorsYTVideos]

getting error 404 page not found when searching for the popular movies, any others know how to fix this issue? My code is identical to Simon's!

[@gmartins-dev]

the same problme here... any solution? @galaxies_dev

[@rizwanramzan5478]

sir ma ya wala kam cap pr kr rha ho lakin nhi ho rha agr koi cap wali app pr koi video ha to send in link for same kam

[@RamazAliKhan]

bhai wo english hy agr kuch bolna hy to english mein bol

[@muhammadzulharith3447]

thanks i have done ur tutorial but after deploy on android why no image ya

[@galaxies_dev]

That's hard to say, but you can use remote debugging to check the logs: kzbin.info/www/bejne/l5zLZ4lsjtxkotk

[@muhammadzulharith3447]

@@galaxies_dev alright2 ill check it out thanks @Simon Grimm

[@davidgeen6077]

Thank you! Nice video👍 Please could you upload for us the source file to download?

[@galaxies_dev]

Link is in the description to the written version!

[@akaz261]

i have a problem in the interface of the movieApp. There is nothing in the index page(movie)

[@akaz261]

anyone can help me ? {{ item.title }} not recognize {{item.title}}

[@galaxies_dev]

Did you take a look at the structure of each item? Maybe there is no title or something wrong with your array!

[@gmartins-dev]

@@galaxies_dev getting error 404 page not found when searching for the popular movies, any others know how to fix this issue? My code is identical to Simon's!

[@gmartins-dev]

@@akaz261 same problem here,

[@gmartins-dev]

@@galaxies_dev i have the same problem, my code is like the tutorial, I made ctrl c + v to test, and doesn't works =(

[@josequintin2467]

Muito bom Sir Simon!

[@lynxnunkima3872]

Hello @Simon_Grimm, can you please make a video how to connect with thermal printers, (receipt printer) from ionic app, any printers really, using bluetooth or wifi

[@galaxies_dev]

Yeah good idea, just need such a device first :D

[@paulhetherington3854]

Ionic - Aye! I'm on, this landmas - Natives.

[@AZZAKIART]

in minutes 29:28 i'am troble. Why ?

[@anarthriagalumphed]

same, did you fix that??

[@mdaslamknl]

Why don't you upload code what created in this video It will be more helpful Thanks

[@galaxies_dev]

The tutorial is linked below the video :)

[@mdaslamknl]

@@galaxies_dev Thank you for reply

[@prabhatkumar803]

I am not finding my self working with ionic capacitor I tried alot when I try to run the applciation in android simulation I am getting network_refused error while calling the api , While my api is working fine ... It is hard to configuration

[@prabhatkumar803]

Ionic: Ionic CLI : 6.19.0 Utility: cordova-res : 0.15.4 native-run : not installed globally System: NodeJS : v14.16.0 npm : 6.14.11 OS : Windows 10

[@dearvivekkumar]

When running on android the images are not loading, after debugging it was happening because of CORS error. Any guilde how to deal with CORS in case of android.

[@galaxies_dev]

You can only fix CORS inside the API or use a proxy, but usually this API has CORS implemented! Maybe you used a wrong URL without SSL and got redirected or something like that?

I got the same issue. The problem is that API for images is called with http instead of https in the tutorial (images property in the environment.ts file)

[@funkyrobot73]

Will this work in Ionic 7? Cause I came across an issue => ( ERROR Error: Uncaught (in promise): NullInjectorError: )

[@galaxies_dev]

Ionic 7 uses Angular Standalone modules, so you need to import the according packages directly in your component!

[@piqueprototype1845]

Thank you for not leaving out the capacitor haha

[@galaxies_dev]

No worries!

[@ash-faque]

Spitting hard words 🗿

[@igorr4682]

What is the idea here ?? cover as much topics within least possible time or teach people something solid ? (dislike !)

[@galaxies_dev]

It's an introduction to many of the Ionic components and concepts to build an app - but feel free to use any other introductory video from other creators if this was too fast for you!

[@HugoMVD]

My app works perfectly on the browser but when I generate the app-debug.apk and install on my android device the request just don't works and not returns the data. Whats is the possible problem?

[@galaxies_dev]

Are you using HTTPS? Because Android needs specific settings if you want to make insecure http calls (http)!

[@HugoMVD]

@@galaxies_dev I just add a "s" and worked! lol Thank uuuuuu 😘😍🤩

[@kucanw1090]

I got an error with InfiniteScrollCustomEvent ("Argument of type 'Event' is not assignable to parameter of type 'InfiniteScrollCustomEvent'."), so I just changed in the movies.page.html "(ionInfinite)="loadMore($event)" to "(ionInfinite)="loadMore($any($event))" and it worked, saw the answer on stackoverflow...

[@MiguelSeabraMelo]

Thanks, I was getting that too with Ionic 7!

[@TamFbs]

Very good tutorial

[@galaxies_dev]

Thank you!