Angular Ionic Training Course Details

In this topic we will refresh angular concepts.

• What is Angular?
• Angular SPA's & Ionic.
• Components in Angular.
• Angular CLI.
• Folder Structure.
• App Component.
• Create First Component.
• Bindings in Angular.
• Directives and Interpolation.
• Events and Inputs.
• Services & DI.
• Navigation in Angular.
• RxIs & Http Client.

In this topic, we will learn how we can use the angular with Ionic.

• Module Introduction
• Why Use Angular?
• Creating a New Ionic Angular Project
• Important: CSS Utility Attributes
• Analysing the Created Project
• How Angular & Ionic Work Together?
• Important: Extra Routing Modules
• 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
• Injecting Ionic Controllers
• Angular Components vs Ionic Components

In this topic, you will learn what is capacitor? Use Capacitor to develop Native Apps.

• Module Introduction
• General Information
• Creating an Android App
• Running the App on Android Device
• Creating an iOS App
• Running the App on a Real Device

In this module, you will learn how to debug angular ionic app?

• Module Introduction
• Error Messages & console.log()
• Using the Browser Devtools & Breakpoints
• Using VS Code for Debugging
• Debugging the UI & Performance
• Debugging Android Apps
• Debugging iOS Apps

In this module, you will learn how to navigate between angular ionic pages?

• Module Introduction
• How Routing Work In An Ionic + Angular App?
• Ionic Page Caching & Extra Lifecycle Hooks/li>
• Creating Our App Pages
• Ionic 5 and Routing / Lazy Loading
• 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
• A Bug with Ionic
• Extracting the ID of Loaded Places
• Adding a Side Drawer
• Opening + Closing the Side Drawer
• Adding Links & Switching Pages
• Adding the Auth Service
• Adding an Auth Guard
• Opening a Modal
• Closing the Modal & Passing Data

In this module, you will learn about ionic components, sizing and layouting.

• Attributes & Slots
• Ionic Grid Basics
• Binding -source, target, mode and trigger
• 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
• Virtual Scrolling Bugs
• Adding Image Elements
• Segmented Buttons
• Adding a Spinner
• Using the Loading Controller
• Using the ActionSheet Controller

In this module, you will learn how style and theme angular ionic app.

• 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
• Missing iOS Icons
• Adding Custom CSS Rules
• Component-specific CSS Variables

In this module, you will learn how to handle the user input.

• User Input Requirements
• Setting Up a Form Template
• Angular 8 & @ViewChild()
• Adding a Template-driven Form
• Handling Validation/li>
• Switching Between Auth Modes
• Finishing the Auth Form
• Starting Work on a New Offer Form
• Creating a Reactive Form
• Syncing the Form to the Template
• Edit Form Challenge
• Configuring the Date Controls
• Validating & Submitting the Form

In this module, you will learn how to manage the state in angular ionic

• What is State?
• Using RxJS Subjects for State Management
• Passing Data via Subjects & Subscriptions
• UI State in Action
• UI State with Bookable Places
• Filtering & Navigation

In this module, you will learn about Http Client service to make calls to backend api.

• How To Connect to a Backend?
• Setting Up Firebase
• Sending Data via Http
• Using Response Data
• Fetching & Displaying Data
• Error Handling
• Add New Data
• Edit existing Data
• Delete Existing Data

In this module, you will learn how to access native device features using Capacitor and Cordova.

• Understanding Capacitor & Cordova
• Using the Docs
• Using Capacitor Plugins
• Getting the User Location
• Testing the Location Feature
• Angular 8 & @ViewChild()
• Starting With the Image Picker
• Taking Pictures
• Delete Existing Data
• Avoid Distorted 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
• Capacitor v1 & PWA Elements
• Using PWA Elements
• Improving the ImagePicker Component

In this module, you will learn what is Authentication? How to implement Authentication in Angular Ionic App?

• How Authentication Works?
• Firebase API Key
• Adding User Signup
• Refactoring the Authentication Code
• Adding User Login
• Managing the User with a Subject
• Using the userId Everywhere
• Storing Auth Data in Device Storag
• 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

In this module, you will learn how to publish Ionic App?

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