How to Build Your First Ionic 4 App with API Calls



Join the Ionic Academy today and learn Ionic fast: https://ionicacademy.com/
Expert screencasts, written tutorials & supportive Community!

#############################

Want to read instead of watch? Here’s the full tutorial: https://ionicacademy.com/ionic-4-app-api-calls/

Want more tutorials? Here you go! https://devdactic.com/

Just getting started? Take my 7 Day Ionic Crash Course: https://ionicacademy.com/ionic-crash-course/

#############################

My Private Daily Vlog: https://www.youtube.com/channel/UCyo_g3MZNTubqz2UbpLgmXw

You can also find me
on https://twitter.com/schlimmson
on https://www.facebook.com/devdactic
on http://instagram.com/simongrimm_

#############################

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 http://curiositystream.com/techlead 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.

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

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

    Reply
  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!!!!

    Reply
  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 ! ??

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

    Reply
  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

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

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

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

    .subscribe(data => {

    this.dataApi = data;

    resolve(this.dataApi);

    });
    how do we change to ionic 4

    Reply
  10. I dont know if anyone else had this issue but once we added in private movieService: MovieService to the movies.page.ts 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

    Reply
  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??

    Reply
  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

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

    Reply
  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 ?

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

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

    can you please help?

    Reply
  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

    Reply
  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?

    Reply
  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?

    Reply
  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!

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

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

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

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

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

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

    Reply

Leave a Comment