1. Getting Started FREE CHAPTER

• Course Introduction
• What Is Ionic?
• A Closer Look at the Ionic Platform
• What is Angular?
• Our First Ionic App!
• The History of Ionic
• Ionic 4+ vs Ionic 3
• How to Build Native Mobile Apps with Ionic
• Course Outline
• How to Get the Most Out Of the Course

2. Angular Refresher

• Module Introduction
• What is Angular?
• Angular SPAs & Ionic
• Understanding Components
• Installing Angular with the CLI
• Installing the IDE
• Understanding the Folder Structure
• The App Component
• Creating Our First Component
• Cross Component Communication with Property Binding
• Understanding Directives & String Interpolation
• Handling User Input
• Understanding Event Binding
• Local References
• Understanding Two-Way-Binding
• Passing Data Around with Custom Events
• Implementing Routing
• Setting Up Services
• Using Services with Dependency Injection
• Working with Angular Lifecycle Hooks
• Adding a Person with Services
• Navigating between Components
• Removing Items upon a Click
• "Push"ing Data Around with Subjects
• Sending Http Requests
• Showing a Placeholder Whilst Waiting for a Response
• Wrap Up

3. Ionic Component Basics

• Module Introduction
• Core App Building Blocks
• Under the Hood of Ionic Components
• Setting Up a Non-Angular Ionic Project
• Where to Learn all about Ionic Components
• Using Basic Ionic Components
• More Basic Components
• Component Categories
• Using the Ionic Grid
• Adding Icons & Using Slots
• Using CSS Utility Attributes
• Using Ionic Elements like "Normal" HTML Elements
• Validating User Input
• Creating Ionic Elements Programmatically
• Finishing Up the Base JavaScript Logic
• Finalizing the Layout
• Using Controller Components
• Why Angular?

4. Angular + Ionic

• Module Introduction
• Why Use Angular?
• Creating a New Ionic Angular Project
• Analyzing the Created Project
• How Angular & Ionic Work Together
• Adding & Loading a New Page
• Using Angular Features on Ionic Components
• Setting Up Angular Routes
• Managing State with Services
• Extracting and Displaying Route Param Data
• Navigating Between Pages
• Deleting a Recipe
• Injecting Ionic Controllers
• Angular Components vs Ionic Components
• Wrap Up

5. Building Native Apps with Capacitor

• Module Introduction
• General Information
• Creating an Android App
• Creating an iOS App
• Wrap Up

6. Debugging

• Module Introduction
• Error Messages & console.log()
• Using the Browser DevTools & Breakpoints
• Debugging the UI & Performance
• Debugging Android Apps
• Debugging iOS Apps
• Wrap Up

7. Navigation & Routing in Ionic Apps

• Module Introduction
• How Routing Work in an Ionic + Angular App
• Ionic Page Caching & Extra Lifecycle Hooks
• Planning the Course Project
• Creating Our App Pages
• Adjusting Our Main Routing Configuration
• Understanding Ionic Tabs
• Adding Tabs to the App
• Preparing Data & Services for the Project
• Outputting "Places"
• Adding Forward Navigation
• Going Back with NavController
• Navigating via Toolbar Buttons
• Extracting the ID of Loaded Places
• Adding a SideDrawer
• Opening + Closing the SideDrawer
• Adding Links & Switching Pages
• Adding the Auth Service
• Adding an Auth Guard
• Opening a Modal
• Closing the Modal & Passing Data
• Wrap Up

8. Ionic Components Overview

• Module Introduction
• Attributes & Slots
• Ionic Grid Basics
• Controlling Grid Column Sizes
• Controlling Grid Alignment
• Responsive Grid Sizing
• Grid Summary
• ion-list vs ion-grid
• ion-label & ion-item
• ion-text
• Swipeable List Items
• Swipeable Bookings
• Understanding Virtual Scrolling
• Implementing Virtual Scrolling
• Adding Image Elements
• Segmented Buttons
• Adding a Spinner
• Using the Loading Controller
• Using the ActionSheet Controller
• Wrap Up

9. Styling & Theming Ionic Apps

• Module Introduction
• How Styling & Theming Works in Ionic Apps
• Docs & Utility Attributes
• Setting Global Theme Variables
• Setting Global Styles
• Setting All Colors at Once
• Setting Platform-Specific Styles
• Styling Core Components with Variables
• Adding Custom CSS Rules
• Component-specific CSS Variables
• Wrap Up

10. Handling User Input

• Module Introduction
• User Input Requirements
• Setting Up a Form Template
• Adding a Template-driven Form
• Handling Validation
• Switching Between Auth Modes
• Finishing the Auth Form
• Starting Work on a New Offer Form
• Finishing the Offer Form Template
• Creating a Reactive Form
• Syncing the Form to the Template
• Finishing the New Offer Form
• Edit Form Challenge
• Adding the Edit Offer Form
• Starting with the Booking Form
• Working on the Book Place Template
• Configuring the Date Controls
• Validating & Submitting the Form
• Wrap Up

11. Managing State

• Module Introduction
• What is State?
• Adding New Places
• Using RxJS Subjects for State Management
• Passing Data via Subjects & Subscriptions
• UI State in Action
• Updating Places
• UI State with Bookable Places
• Booking Places
• Fixing a Bug
• Cancelling Bookings
• Finishing Touches

12. Sending Http Requests

• Module Introduction
• How to Connect to a Backend
• Setting Up Firebase
• Sending Data via Http
• Using Response Data
• Fetching & Displaying Data
• Updating Places
• Fetching Data in Multiple Places
• Loading Data in a Single Place
• Updating Places Correctly
• Error Handling
• Fetching Single Places
• Adding a Booking
• Fetching Bookings by User
• Deleting Bookings
• Wrap Up

13. Adding Google Maps

• Module Introduction
• API Setup
• Adding a LocationPicker Component
• Opening the Map Modal
• Adding the Google Maps SDK
• Rendering a Map
• Picking Locations via a Click on the Map
• Finding the Address for a Place
• Fetching a Static Image URL
• Displaying a Place Preview
• Changing the Selection
• Removing the Click Listener
• Submitting the Location
• Outputting Address & Map
• Re-using the Maps Modal

14. Using Native Device Features (Camera & Location)

• Module Introduction
• Understanding Capacitor & Cordova
• Using the Docs
• Using Capacitor Plugins
• Getting the User Location
• Testing the Location Feature
• Starting With the Image Picker
• Taking Pictures
• Detecting the Platform Correctly
• Adding a Filepicker Fallback
• Getting the Picked Image
• Converting the Image String to a File
• Storing the Image in the Form
• Using PWA Elements
• Improving the ImagePicker Component
• Adding Server-side Image Uploading Code
• Adding Image Upload
• Wrap Up

15. Adding Authentication

• Module Introduction
• How Authentication Works
• Adding User Signup
• Refactoring the Authentication Code
• Adding User Login
• Managing the User with a Subject
• Storing the Token in Memory
• Using the ID Observable Correctly
• More userId Usage
• Fixing the Subscription
• Using the userId everywhere
• Storing Auth Data in Device Storage
• Adding Autologin
• Using Autologin
• Adding a Reactive Logout System
• Adding Autologout
• Requiring the Auth Token on the Backend
• Sending the Auth Token to the Backend
• More Token Usage
• Wrap Up

16. Publishing the Apps

• Module Introduction
• Preparing App Configs
• Custom Icons & Splash Screens
• Android Deployment
• iOS Deployment
• Web Development

17. Roundup

• Course Roundup