Pro Members
Pro Members

Ionic - Build iOS, Android & Web Apps with Ionic & Angular

Build native iOS & Android as well as Progressive Web Apps with Angular, Capacitor and the Ionic Framework.

  • 17 sections, 275 lectures
  • Total duration: 20h 12m
Start NowEnrollment Options
Ionic - Build iOS, Android & Web Apps with Ionic & Angular

Course Overview

About This Course

You know Angular — but the moment you think about shipping a real mobile app, everything suddenly feels like a different world: app stores, device features, navigation patterns, and testing on actual phones. You don’t want to start over with a new language just to get something running on iOS and Android.

In this course, you’ll use what you already have (HTML, CSS, JavaScript, and Angular) and apply it to building mobile and web apps with Ionic. You’ll follow a practical path that keeps you moving: set up your projects, build screens with ready-to-use UI building blocks, and connect your app to real data and device capabilities.

By the end, you’ll be able to take a single codebase and ship it as three deliverables: an iOS app, an Android app, and a progressive web app. You’ll know how to run and test your app in different environments and confidently prepare it for release on the major app stores.

What You'll Learn

You’ll use Angular with Ionic and Capacitor to create one app that runs as iOS, Android, and a progressive web app — including UI, data, device features, and publishing.

  • Set up Ionic projects

    Create and configure new Ionic projects and understand how an Ionic + Angular app is structured, so you can navigate files, extend features, and keep your codebase maintainable.

  • Build native-like UIs

    Compose polished interfaces with Ionic’s component library, using elements like modals, alerts, and toasts to deliver app-style feedback and flows without reinventing common UI patterns.

  • Implement app navigation

    Build navigation that feels right on mobile by combining “Back”-button navigation with tabs and sidemenus, and choosing the right approach for different parts of your app.

  • Handle user input

    Collect and process user input through inputs, textfields, dropdowns, and dialogs, so your app can capture real information and react to it reliably across platforms.

  • Connect auth and HTTP

    Authenticate users and communicate with web servers via HTTP to store and load data, enabling real app behavior instead of static screens.

  • Use storage and device APIs

    Persist data locally and access native device features like the camera and geolocation through Capacitor, so your app can take advantage of what phones can do.

Ready to get started?

See enrollment options

Prerequisites

  • Angular fundamentals (a brief refresher is included, but you should already know the basics).

  • Basic HTML, JavaScript, and CSS knowledge.

Who Is This Course For?

  • Angular developers

    You’re comfortable building Angular apps and want to reuse that skill to ship real iOS and Android apps without switching to a completely different tech stack.

  • Web app builders

    You can build for the browser, but you’re blocked by mobile-specific concerns like navigation patterns, device testing, and store release steps — and you want a guided path through them.

  • Mobile-curious learners

    You want to dive into native mobile app development for iOS and Android, but you’d rather start with familiar web technologies and still end up with apps you can publish.

Curriculum Overview

Start Now

Preview the structure and pacing of this course before you begin.

  • Getting Started14 lectures52m
    • 01Course Introduction2:27 min
    • 02What Is Ionic?7:44 min
    • 03A Closer Look at the Ionic Platform4:27 min
    • 04Join our Online Learning Community0:00 min
    • 05What is Angular?3:59 min
    • 06Our First Ionic App!13:36 min
    • 07The History of Ionic4:01 min
    • 08Ionic 4+ vs Ionic 33:06 min
    • 09How to Build Native Mobile Apps with Ionic3:45 min
    • 10Ionic Alternatives0:00 min
    • 11Course Outline6:23 min
    • 12How To Get The Most Out Of The Course3:00 min
    • 13The Course Source Code0:00 min
    • 14The Academind Pro Referral Program0:00 min
  • Angular Refresher29 lectures1h 47m
    • 01Module Introduction0:32 min
    • 02What is Angular?2:42 min
    • 03Angular SPAs & Ionic3:09 min
    • 04Understanding Components1:37 min
    • 05Installing Angular with the CLI4:29 min
    • 06Installing the IDE4:59 min
    • 07Understanding the Folder Structure8:14 min
    • 08The App Component7:04 min
    • 09Creating Our First Component4:05 min
    • 10Cross Component Communication with Property Binding5:23 min
    • 11Understanding Directives & String Interpolation4:05 min
    • 12Handling User Input4:08 min
    • 13Understanding Event Binding2:13 min
    • 14Local References1:49 min
    • 15Understanding Two-Way-Binding5:56 min
    • 16Passing Data Around with Custom Events3:58 min
    • 17Implementing Routing7:10 min
    • 18Setting Up Services3:15 min
    • 19Using Services with Dependency Injection2:48 min
    • 20Working with Angular Lifecycle Hooks3:25 min
    • 21Adding a Person with Services2:44 min
    • 22Navigating between Components2:03 min
    • 23Removing Items Upon a Click3:08 min
    • 24"Push"ing Data Around with Subjects5:34 min
    • 25More on RxJS & Observables0:00 min
    • 26Sending Http Requests10:03 min
    • 27Showing a Placeholder Whilst Waiting for a Response2:05 min
    • 28Wrap Up1:17 min
    • 29Useful Resources & Links0:00 min
  • Ionic Component Basics21 lectures1h 28m
    • 01Module Introduction1:20 min
    • 02Core App Building Blocks4:26 min
    • 03Under the Hood of Ionic Components6:47 min
    • 04Setting Up a Non-Angular Ionic Project3:04 min
    • 05Where to Learn all about Ionic Components2:29 min
    • 06Using Basic Ionic Components5:11 min
    • 07More Basic Components3:23 min
    • 08Component Categories2:27 min
    • 09Using the Ionic Grid4:51 min
    • 10Adding Icons & Using Slots6:14 min
    • 11Using CSS Utility Attributes3:42 min
    • 12Using Ionic Elements like "Normal" HTML Elements4:12 min
    • 13Validating User Input2:46 min
    • 14Creating Ionic Elements Programmatically4:57 min
    • 15Finishing Up the Base JavaScript Logic3:39 min
    • 16Finalizing the Layout1:31 min
    • 17Using Controller Components7:48 min
    • 18Assignment: Component Basics (Problem)1:42 min
    • 19Assignment: Component Basics (Solution)12:28 min
    • 20Why Angular?5:29 min
    • 21Useful Resources & Links0:00 min
  • Angular + Ionic16 lectures1h 12m
    • 01Module Introduction1:44 min
    • 02Why Use Angular?2:39 min
    • 03Creating a New Ionic Angular Project5:49 min
    • 04Analyzing the Created Project5:53 min
    • 05How Angular & Ionic Work Together3:53 min
    • 06Adding & Loading a New Page7:44 min
    • 07Using Angular Features on Ionic Components5:28 min
    • 08Setting Up Angular Routes4:06 min
    • 09Managing State with Services6:21 min
    • 10Extracting and Displaying Route Param Data8:34 min
    • 11Navigating Between Pages5:32 min
    • 12Deleting a Recipe4:34 min
    • 13Injecting Ionic Controllers3:31 min
    • 14Angular Components vs Ionic Components5:49 min
    • 15Wrap Up0:37 min
    • 16Useful Resources & Links0:00 min
  • Building Native Apps with Capacitor8 lectures25m
    • 01Module Introduction0:59 min
    • 02General Information1:28 min
    • 03Creating an Android App12:33 min
    • 04Running the App on a real Android Device0:00 min
    • 05Creating an iOS App9:10 min
    • 06Running the App on a Real iOS Device0:00 min
    • 07Wrap Up1:03 min
    • 08Useful Resources & Links0:00 min
  • Debugging9 lectures19m
    • 01Module Introduction0:44 min
    • 02Error Messages & console.log()4:02 min
    • 03Using the Browser DevTools & Breakpoints2:30 min
    • 04Using VS Code for Debugging0:00 min
    • 05Debugging the UI & Performance2:53 min
    • 06Debugging Android Apps4:16 min
    • 07Debugging iOS Apps4:16 min
    • 08Wrap Up0:40 min
    • 09Useful Resources & Links0:00 min
  • Navigation & Routing in Ionic Apps27 lectures2h 16m
    • 01Module Introduction1:41 min
    • 02How Routing Work In An Ionic + Angular App4:37 min
    • 03Ionic Page Caching & Extra Lifecycle Hooks9:20 min
    • 04Planning the Course Project4:06 min
    • 05Creating Our App Pages7:44 min
    • 06Adjusting Our Main Routing Configuration1:59 min
    • 07Understanding Ionic Tabs1:29 min
    • 08Adding Tabs to the App15:22 min
    • 09Preparing Data & Services for the Project5:53 min
    • 10Outputting "Places"8:12 min
    • 11Adding Forward Navigation6:21 min
    • 12Going Back with NavController7:01 min
    • 13Assignment: Ionic + Angular Navigation (Problem)1:20 min
    • 14Assignment: Ionic + Angular Navigation (Solution)4:15 min
    • 15Navigating via Toolbar Buttons3:13 min
    • 16Extracting the ID of Loaded Places5:34 min
    • 17Assignment: More Practicing! (Problem)0:42 min
    • 18Assignment: More Practicing! (Solution)5:33 min
    • 19Adding a SideDrawer7:00 min
    • 20Opening + Closing the SideDrawer4:46 min
    • 21Adding Links & Switching Pages4:15 min
    • 22Adding the Auth Service3:28 min
    • 23Adding an Auth Guard7:47 min
    • 24Opening a Modal6:26 min
    • 25Closing the Modal & Passing Data7:21 min
    • 26Wrap Up1:24 min
    • 27Useful Resources & Links0:00 min
  • Ionic Components Overview21 lectures1h 40m
    • 01Module Introduction1:52 min
    • 02Attributes & Slots6:09 min
    • 03Ionic Grid Basics8:35 min
    • 04Controlling Grid Column Sizes3:44 min
    • 05Controlling Grid Alignment5:29 min
    • 06Responsive Grid Sizing5:10 min
    • 07Grid Summary2:11 min
    • 08ion-list vs ion-grid3:06 min
    • 09ion-label & ion-item7:29 min
    • 10ion-text2:39 min
    • 11Swipeable List Items11:08 min
    • 12Swipeable Bookings10:12 min
    • 13Understanding Virtual Scrolling3:50 min
    • 14Implementing Virtual Scrolling5:23 min
    • 15Adding Image Elements2:45 min
    • 16Segmented Buttons5:47 min
    • 17Adding a Spinner4:17 min
    • 18Using the Loading Controller2:36 min
    • 19Using the ActionSheet Controller6:50 min
    • 20Wrap Up1:42 min
    • 21Useful Resources & Links0:00 min

And 9 more sections in the full course.

Ready to Get Started?

Choose the option that works best for you.

Single Course

Ionic - Build iOS, Android & Web Apps with Ionic & Angular

One Payment. Lifetime Access.

$69one-time

  • One-time payment
  • All future updates for this course
  • Downloadable resources & code
  • Certificate of completion
  • Hands-on exercises & projects
  • Self-paced learning
  • English captions on all videos
  • Lifetime access
Buy Ionic

Single course license

Most Popular

All-Access Membership

Everything we teach. One subscription.

$25/mo

$4,729+ worth of courses

  • Full access to all courses
  • All future courses included
  • Downloadable resources & code
  • Certificates of completion
  • Hands-on exercises & projects
  • Self-paced learning
  • English captions on all videos
  • Cancel anytime
Subscribe Now

61 courses included

30-day money-back guarantee · All prices incl. VAT