W3docs

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.

Start course

Ionic is one of the most exciting technologies you can learn at the moment - it enables you to use one codebase (written in HTML, JS and CSS) to build and ship apps as normal (progressive) web apps as well as real native mobile apps for iOS and Android. This course teaches you the latest version of Ionic from scratch with no prior knowledge about it assumed.

Angular (formerly Angular 2) allows you to create awesome web applications powered by TypeScript / JavaScript. Wouldn't it be great to use that Angular knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device? And also publish them as progressive web apps at the same time.

The Ionic framework allows you to do just that! Use your existing Angular, HTML, JS and CSS knowledge and build your native mobile app with that! Ionic offers a lot of beautiful components (which you'll learn about in this course) that can be used to compose native-like user interfaces.

Capacitor (another tool provided by the Ionic team) will handle the rest as it's used to then build a native mobile app for iOS/ Android based on your code. This allows you to focus on the things you know and release your application on all possible devices (desktop and mobile) without having to learn thousands of different languages! Indeed, with Ionic, you can use one codebase to ship three different apps (iOS, Android, web).

No wonder that hybrid frameworks like Ionic are extremely popular and in high demand!

My name is Maximilian Schwarzmüller and I'm a freelance web developer as well as creator of many top-rated courses - including my "Angular - The Complete Guide" course, the bestselling Angular course you can find!

I love creating awesome web applications and it simply is amazing to now use that knowledge and build native mobile apps with it, too!

This course takes your from zero to published app, taking a very practice-orientated route . You'll a realistic app (where users can create and book events) throughout the course, learning about the basics of Ionic, its rich component library, how to fetch and handle user input, how to store data and access native device features and much more!

You'll dive into all important Ionic components as well as concepts like navigation (tabs, sidemenus), user input, native device features (e.g. camera), storage, http, authentication!

And since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser, on an emulator or on your own device!

What exactly are you going to learn then?

  • A brief refresher on Angular
  • How to set up your Ionic projects
  • The basics about Ionic - How navigation works, how your project is structured and you use its rich component library
  • How to use the many beautiful components Ionic ships with
  • How to use different kinds of navigation concepts: "Back"-Button-Navigation, tabs and sidemenus
  • How to show modals, alerts, toasts and many, many more useful UI components
  • How to test the app in the browser, on emulators or real devices
  • How to fetch and handle user input through inputs, textfields, dropdowns, dialogs etc.
  • How to authenticate users and access web servers to store + load data
  • How to access the local device storage and native device features like the camera or geolocation
  • So much more ... like styling and theming your app
  • Finally, you'll learn how to configure your app and publish it to the App Store or Google Play Store (or as a progressive web app)

Does this sound great?

I can't wait to welcome you in this course!

Course content

Section 1Getting Started

  • Course Introduction
    2:25
  • What Is Ionic?
    7:44
  • A Closer Look at the Ionic Platform
    4:27
  • Join our Online Learning Community
    1:00
  • What is Angular?
    3:59
  • Our First Ionic App!
    13:36
  • The History of Ionic
    4:01
  • Ionic 4+ vs Ionic 3
    3:06
  • How to Build Native Mobile Apps with Ionic
    3:45
  • Ionic Alternatives
    1:00
  • Course Outline
    6:23
  • How To Get The Most Out Of The Course
    3:00
  • The Course Source Code
    1:00

Section 2Angular Refresher

  • Module IntroductionPremium
    0:32
  • What is Angular?Premium
    2:42
  • Angular SPAs & IonicPremium
    3:09
  • Understanding ComponentsPremium
    1:37
  • Installing Angular with the CLIPremium
    4:29
  • Installing the IDEPremium
    4:59
  • Understanding the Folder StructurePremium
    8:14
  • The App ComponentPremium
    7:04
  • Creating Our First ComponentPremium
    4:05
  • Cross Component Communication with Property BindingPremium
    5:23
  • Understanding Directives & String InterpolationPremium
    4:05
  • Handling User InputPremium
    4:08
  • Understanding Event BindingPremium
    2:13
  • Local ReferencesPremium
    1:49
  • Understanding Two-Way-BindingPremium
    5:56
  • Passing Data Around with Custom EventsPremium
    3:58
  • Implementing RoutingPremium
    7:10
  • Setting Up ServicesPremium
    3:15
  • Using Services with Dependency InjectionPremium
    2:48
  • Working with Angular Lifecycle HooksPremium
    3:25
  • Adding a Person with ServicesPremium
    2:44
  • Navigating between ComponentsPremium
    2:03
  • Removing Items Upon a ClickPremium
    3:08
  • "Push"ing Data Around with SubjectsPremium
    5:34
  • More on RxJS & ObservablesPremium
    1:00
  • Sending Http RequestsPremium
    10:03
  • Showing a Placeholder Whilst Waiting for a ResponsePremium
    2:05
  • Wrap UpPremium
    1:17
  • Useful Resources & LinksPremium
    1:00

Section 3Ionic Component Basics

  • Module IntroductionPremium
    1:20
  • Core App Building BlocksPremium
    4:26
  • Under the Hood of Ionic ComponentsPremium
    6:47
  • Setting Up a Non-Angular Ionic ProjectPremium
    3:04
  • Where to Learn all about Ionic ComponentsPremium
    2:29
  • Using Basic Ionic ComponentsPremium
    5:11
  • More Basic ComponentsPremium
    3:23
  • Component CategoriesPremium
    2:27
  • Using the Ionic GridPremium
    4:51
  • Adding Icons & Using SlotsPremium
    6:14
  • Using CSS Utility AttributesPremium
    3:42
  • Using Ionic Elements like "Normal" HTML ElementsPremium
    4:12
  • Validating User InputPremium
    2:46
  • Creating Ionic Elements ProgrammaticallyPremium
    4:57
  • Finishing Up the Base JavaScript LogicPremium
    3:39
  • Finalizing the LayoutPremium
    1:31
  • Using Controller ComponentsPremium
    7:48
  • Assignment: Component Basics (Problem)Premium
    1:42
  • Assignment: Component Basics (Solution)Premium
    12:28
  • Why Angular?Premium
    5:29
  • Useful Resources & LinksPremium
    1:00

Section 4Angular + Ionic

  • Module IntroductionPremium
    1:44
  • Why Use Angular?Premium
    2:39
  • Creating a New Ionic Angular ProjectPremium
    5:49
  • Analyzing the Created ProjectPremium
    5:53
  • How Angular & Ionic Work TogetherPremium
    3:53
  • Adding & Loading a New PagePremium
    7:44
  • Using Angular Features on Ionic ComponentsPremium
    5:28
  • Setting Up Angular RoutesPremium
    4:06
  • Managing State with ServicesPremium
    6:21
  • Extracting and Displaying Route Param DataPremium
    8:34
  • Navigating Between PagesPremium
    5:32
  • Deleting a RecipePremium
    4:34
  • Injecting Ionic ControllersPremium
    3:31
  • Angular Components vs Ionic ComponentsPremium
    5:49
  • Wrap UpPremium
    0:37
  • Useful Resources & LinksPremium
    1:00

Section 5Building Native Apps with Capacitor

  • Module IntroductionPremium
    0:59
  • General InformationPremium
    1:28
  • Creating an Android AppPremium
    12:33
  • Running the App on a real Android DevicePremium
    1:00
  • Creating an iOS AppPremium
    9:10
  • Running the App on a Real iOS DevicePremium
    1:00
  • Wrap UpPremium
    1:03
  • Useful Resources & LinksPremium
    1:00

Section 6Debugging

  • Module IntroductionPremium
    0:44
  • Error Messages & console.log()Premium
    4:02
  • Using the Browser DevTools & BreakpointsPremium
    2:30
  • Using VS Code for DebuggingPremium
    1:00
  • Debugging the UI & PerformancePremium
    2:53
  • Debugging Android AppsPremium
    4:16
  • Debugging iOS AppsPremium
    4:16
  • Wrap UpPremium
    0:40
  • Useful Resources & LinksPremium
    1:00

Section 7Navigation & Routing in Ionic Apps

  • Module IntroductionPremium
    1:41
  • How Routing Work In An Ionic + Angular AppPremium
    4:37
  • Ionic Page Caching & Extra Lifecycle HooksPremium
    9:20
  • Creating Our App PagesPremium
    7:44
  • Adjusting Our Main Routing ConfigurationPremium
    1:59
  • Understanding Ionic TabsPremium
    1:29
  • Adding Tabs to the AppPremium
    15:22
  • Preparing Data & Services for the ProjectPremium
    5:53
  • Outputting "Places"Premium
    8:12
  • Adding Forward NavigationPremium
    6:21
  • Going Back with NavControllerPremium
    7:01
  • Assignment: Ionic + Angular Navigation (Problem)Premium
    1:20
  • Assignment: Ionic + Angular Navigation (Solution)Premium
    4:15
  • Navigating via Toolbar ButtonsPremium
    3:13
  • Extracting the ID of Loaded PlacesPremium
    5:34
  • Assignment: More Practicing! (Problem)Premium
    0:42
  • Assignment: More Practicing! (Solution)Premium
    5:33
  • Adding a SideDrawerPremium
    7:00
  • Opening + Closing the SideDrawerPremium
    4:46
  • Adding Links & Switching PagesPremium
    4:15
  • Adding the Auth ServicePremium
    3:28
  • Adding an Auth GuardPremium
    7:47
  • Opening a ModalPremium
    6:26
  • Closing the Modal & Passing DataPremium
    7:21
  • Wrap UpPremium
    1:24
  • Useful Resources & LinksPremium
    1:00

Section 8Ionic Components Overview

  • Module IntroductionPremium
    1:52
  • Attributes & SlotsPremium
    6:09
  • Ionic Grid BasicsPremium
    8:35
  • Controlling Grid Column SizesPremium
    3:44
  • Controlling Grid AlignmentPremium
    5:29
  • Responsive Grid SizingPremium
    5:10
  • Grid SummaryPremium
    2:11
  • ion-list vs ion-gridPremium
    3:06
  • ion-label & ion-itemPremium
    7:29
  • ion-textPremium
    2:39
  • Swipeable List ItemsPremium
    11:08
  • Swipeable BookingsPremium
    10:12
  • Understanding Virtual ScrollingPremium
    3:50
  • Implementing Virtual ScrollingPremium
    5:23
  • Adding Image ElementsPremium
    2:45
  • Segmented ButtonsPremium
    5:47
  • Adding a SpinnerPremium
    4:17
  • Using the Loading ControllerPremium
    2:36
  • Using the ActionSheet ControllerPremium
    6:50
  • Wrap UpPremium
    1:42
  • Useful Resources & LinksPremium
    1:00

Section 9Styling & Theming Ionic Apps

  • Module IntroductionPremium
    1:12
  • How Styling & Theming Works in Ionic AppsPremium
    6:44
  • Docs & Utility AttributesPremium
    1:13
  • Setting Global Theme VariablesPremium
    3:28
  • Setting Global StylesPremium
    1:18
  • Setting All Colors at OncePremium
    2:35
  • Setting Platform-Specific StylesPremium
    3:58
  • Styling Core Components with VariablesPremium
    8:13
  • Adding Custom CSS RulesPremium
    10:01
  • Component-specific CSS VariablesPremium
    4:32
  • Wrap UpPremium
    0:40
  • Useful Resources & LinksPremium
    1:00

Section 10Handling User Input

  • Module IntroductionPremium
    1:32
  • User Input RequirementsPremium
    1:20
  • Setting Up a Form TemplatePremium
    5:45
  • Adding a Template-driven FormPremium
    7:37
  • Handling ValidationPremium
    6:02
  • Switching Between Auth ModesPremium
    2:35
  • Finishing the Auth FormPremium
    2:28
  • Starting Work on a New Offer FormPremium
    3:54
  • Finishing the Offer Form TemplatePremium
    4:22
  • Creating a Reactive FormPremium
    5:21
  • Syncing the Form to the TemplatePremium
    4:00
  • Finishing the New Offer FormPremium
    4:01
  • Edit Form ChallengePremium
    0:52
  • Adding the Edit Offer FormPremium
    5:36
  • Starting with the Booking FormPremium
    4:33
  • Working on the Book Place TemplatePremium
    5:59
  • Configuring the Date ControlsPremium
    11:44
  • Validating & Submitting the FormPremium
    8:12
  • Wrap UpPremium
    1:26
  • Useful Resources & LinksPremium
    1:00

Section 11Managing State

  • Module IntroductionPremium
    1:05
  • What is State?Premium
    4:01
  • Adding New PlacesPremium
    12:14
  • Using RxJS Subjects for State ManagementPremium
    8:59
  • Passing Data via Subjects & SubscriptionsPremium
    12:24
  • UI State in ActionPremium
    8:10
  • Updating PlacesPremium
    8:40
  • UI State with Bookable PlacesPremium
    7:01
  • Filtering & NavigationPremium
    1:00
  • Booking PlacesPremium
    16:05
  • Fixing a BugPremium
    0:25
  • Canceling BookingsPremium
    4:54
  • Finishing TouchesPremium
    4:36
  • Useful Resources & LinksPremium
    1:00

Section 12Sending Http Requests

  • Module IntroductionPremium
    0:46
  • How To Connect to a BackendPremium
    2:13
  • Setting Up FirebasePremium
    2:11
  • Sending Data via HttpPremium
    7:12
  • Using Response DataPremium
    3:36
  • Fetching & Displaying DataPremium
    14:50
  • Updating PlacesPremium
    6:38
  • Fetching Data in Multiple PlacesPremium
    3:15
  • Loading Data in a Single PlacePremium
    6:59
  • Updating Places CorrectlyPremium
    3:52
  • Error HandlingPremium
    3:27
  • Fetching Single PlacesPremium
    6:18
  • Adding a BookingPremium
    6:46
  • Fetching Bookings By UserPremium
    10:07
  • Deleting BookingsPremium
    5:11
  • Wrap UpPremium
    0:56
  • Useful Resources & LinksPremium
    1:00

Section 13Adding Google Maps

  • Module IntroductionPremium
    1:29
  • API SetupPremium
    3:32
  • Adding a LocationPicker ComponentPremium
    6:51
  • Opening the Map ModalPremium
    3:59
  • Adding the Google Maps SDKPremium
    8:44
  • Rendering a MapPremium
    6:04
  • Picking Locations via a Click on the MapPremium
    3:41
  • Finding the Address for a PlacePremium
    8:47
  • Fetching a Static Image URLPremium
    7:19
  • Displaying a Place PreviewPremium
    5:12
  • Changing the SelectionPremium
    1:01
  • Removing the Click ListenerPremium
    2:10
  • Submitting the LocationPremium
    8:14
  • Outputting Address & MapPremium
    3:23
  • Re-using the Maps ModalPremium
    8:36
  • Useful Resources & LinksPremium
    1:00

Section 14Using Native Device Features (Camera & Location)

  • Module IntroductionPremium
    0:57
  • Understanding Capacitor & CordovaPremium
    4:12
  • Using the DocsPremium
    0:56
  • Using Capacitor PluginsPremium
    6:39
  • Getting the User LocationPremium
    9:37
  • Testing the Location FeaturePremium
    6:17
  • Starting With the Image PickerPremium
    4:26
  • Taking PicturesPremium
    10:11
  • Avoid Distorted PicturesPremium
    1:00
  • Detecting the Platform CorrectlyPremium
    5:00
  • Adding a Filepicker FallbackPremium
    4:43
  • Getting the Picked ImagePremium
    3:00
  • Converting the Image String to a FilePremium
    5:13
  • Storing the Image in the FormPremium
    3:30
  • Using PWA ElementsPremium
    4:06
  • Improving the ImagePicker ComponentPremium
    4:46
  • MUST READ: Firebase Cloud Functions & BillingPremium
    1:00
  • Adding Server-side Image Uploading CodePremium
    5:04
  • Adding Image UploadPremium
    7:30
  • Wrap UpPremium
    1:06
  • Useful Resources & LinksPremium
    1:00

Section 15Adding Authentication

  • Module IntroductionPremium
    0:51
  • How Authentication WorksPremium
    3:00
  • Adding User SignupPremium
    10:05
  • Refactoring the Authentication CodePremium
    6:33
  • Adding User LoginPremium
    6:23
  • Managing the User with a SubjectPremium
    6:41
  • Storing the Token in MemoryPremium
    4:55
  • Using the ID Observable CorrectlyPremium
    4:42
  • More userId UsagePremium
    4:57
  • Fixing the SubscriptionPremium
    0:49
  • Using the userId EverywherePremium
    5:56
  • Storing Auth Data in Device StoragPremium
    4:22
  • Adding AutologinPremium
    6:48
  • Using AutologinPremium
    4:15
  • Adding a Reactive Logout SystemPremium
    7:52
  • Adding AutologoutPremium
    8:00
  • Requiring the Auth Token on the BackendPremium
    6:22
  • Sending the Auth Token to the BackendPremium
    7:55
  • More Token UsagePremium
    4:12
  • Optional: Check Auth State When App ResumesPremium
    1:00
  • Wrap UpPremium
    1:35
  • Useful Resources & LinksPremium
    1:00

Section 16Publishing the Apps

  • Module IntroductionPremium
    1:06
  • Preparing App ConfigsPremium
    7:52
  • Custom Icons & Splash ScreensPremium
    8:53
  • Android DeploymentPremium
    3:54
  • iOS DeploymentPremium
    3:33
  • Web DevelopmentPremium
    5:45
  • Useful Resources & LinksPremium
    1:00

Section 17Course Roundup

  • Course RoundupPremium
    1:37

Course instructor

Photo of Maximilian Schwarzmüller

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.