How to Build Your First Ionic 4 App with API Calls

Join the Ionic Academy today and learn Ionic fast:
Expert screencasts, written tutorials & supportive Community!


Want to read instead of watch? Here’s the full tutorial:

Want more tutorials? Here you go!

Just getting started? Take my 7 Day Ionic Crash Course:


My Private Daily Vlog:

You can also find me


Related Posts
lit-HTML (Chrome Dev Summit 2017)

lit-HTML is a next-generation templating library that combines powerful web platform primitives – JavaScript tagged template literals and HTML templates Read more

The Truth about app development – how coding has changed in 2020.

Ex-Google TechLead explains why apps and websites are so hard to succeed. Check out for unlimited access to the Read more

How to use Cordova to create an Android app

This example is for JavaScript beginners. We take a simple JavaScript web app that estimates paint cost and create an Read more

Display notifications – Progressive Web App Training

What's the best way to display popup notifications on mobile and desktop. This video shows how to use the Notification Read more

47 thoughts on “How to Build Your First Ionic 4 App with API Calls”

  1. Awesome tutorial. I managed to deploy to Firebase Hosting and added it to my github repo. This video really gave me the jumpstart into ionic, for the first time.

  2. Hi Simon, how are you? So, I need you help in this part "console.log ('RAW:', results);
    return results ['search']; "I get this message "object access via string literals is disallowedtslint (no-string-literal)".

    When I do a search it does not appear the texts, but in the browser console show that the searched "movie" was found.
    How do I solve it?
    Sorry about the english, I'm using google translater.

  3. I actually generated an app from this and installed it on my android phone and it doesn't work. Everything appears but it never searches.

  4. salut Simon merci beaucoup pour cette video
    c'est Bon, je veux savoir comment faire la partie connectivite a un serveur distant en utilisant le protochole TELNET via IONIC 4.
    Merci d'avance!!!!

  5. Dude, thank you for the video, but I believe that you are running around too much between tabs, pages, code ecc.. If you could try to be a bit more relaxed and slow in the process your videos would be much much better and easier to follow ! ??

  6. Hello Simon how to solve this error
    when I run : ionic cordova build android –prod
    I got this error

    ERROR in src/app/app.module.ts(14,36): error TS2339: Property 'firebaseConfig' does not exist on type '{ production: boolean; }'.

    [ERROR] An error occurred while running subprocess ng.

    ng run app:ionic-cordova-build:production –platform=android exited with exit code 1.

    Re-running this command with the –verbose flag may provide more information.

  7. Hi Simon, thanks for the great video. I copied step by step but for some how when i typed the title on the search bar. Nothing came up. Even though, in the console log did show some result. Do you happen to know why? Thanks a ot for your help

  8. I actually logged in just to like this video … never done that before !! props to you my friend… keep up the great work 🙂

  9. this.http.get(this.apiUrl)

    .map(res => res.json())

    .subscribe(data => {

    this.dataApi = data;


    how do we change to ionic 4

  10. I dont know if anyone else had this issue but once we added in private movieService: MovieService to the constructor the app compiles but does not show anything. If I get rid of this from the constructor the page loads fine but obviously doesnt use movieservice then

  11. thank you very much but
    in file / movie.service.ts
    searchData(title: string, type: SearchType): Observable<any> {
    return this.http.get(`${this.url}?s=${encodeURI(title)}&type=${type}&apikey=${this.apiKey}`).pipe(
    map(results => results['Search'])
    only for JSON!!
    i want to XML
    How to convert Json to XML??

  12. if i change the url to movies/000000 for example i stil go to the movie detail page, how can i prevent it to happen

  13. Hi Simon, I am creating a similar app that implements infinite scroll. How do I update the result: Observable<any> by concatenating new items to it? Regards.

  14. Hey Simon, Thanks for your video… Can you please tell me in this method, how do one append request headers for the api call ?

  15. I copied the code step by step, but as I reached the line of

    constructor(private movieService: MovieService) { }
    the header moives disappears but no errors displayed.

    can you please help?

  16. So i got a question, how do you set your RootPage so my rootpage now is the Tabspage and i want the rootpage to be a page called '/getting-started' that i made. But i can't seem to find out how

  17. Thank you very much for the tutorial. I have learned a lot by following 🙂 I could not understand this part tho. Looking at the console I see results returned in an array of 10 items. Is this how API is setup or we did that in the app and I missed it?

  18. Great tutorial, very well explained. I tried to add ionic-image-loader to this sample app, but found a lot of compatibility errors. Any ideas?

  19. Hi Simon! Thanks a lot! great video as allways ! I am facing an 'issue' I don't get any result, the console logs always the same message: Movie not found!

  20. ionic 4 app stuck after splash screen if we run it on real device . did not find any solution please help

  21. thnx to U , i learnt much of the Ionic 3 and now moving to ionic 4 . Hope to see U uploading more interactive and amazing stuffs . If possible could U make a detail video about CSS custom Properties in Ionic 4.

  22. Hi Simon. Your videos very helpful. Please tell me ionic popover css. It's not present in popover.

  23. After typing this command *ionic g service services/movie
    * I'm getting following error:
    [ERROR] type must be one of: component, directive, page, pipe, provider, tabs (not service)

    Use the –help flag for more details.
    By seeing at error I believe I can use *ionic g provider movie
    * . But I'm not sure, needs your assistance.

  24. thank you for your greats videos. Could you please make a video about ionic & firebase. Can i make a web app with ionic?

  25. Thnk u sir …great video for learner..if you are creating Ecommerce project it will very helpfull to student as well as are the greate .thnk u once again sir.


Leave a Comment