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

Explore how Angular uses components to compose user interfaces, including header, side nav, and list item components, enabling reuse and single-definition logic through component-driven development.

Install the angular CLI via npm, set up NodeJS and npm, and create a new angular project with ng new for a streamlined, single-page application workflow.

Explore the Angular folder structure, focusing on main.ts and app.module.ts, with @NgModule, declarations, imports, and bootstrap to initialize the root component in the browser.

Create a new Angular component named persons, decorate it with @Component, use selector app-persons, and template at ./persons.component.html; declare it in the app module and render via app-persons in app.component.html.

Render a dynamic list in an Angular template by using property binding to receive data and ngFor with string interpolation to output each item as a list entry.

Create a person-input component in Angular to handle user input, register it in the app module, and render a text input with a label and create button.

Explore how two-way binding with ngModel enables bidirectional data flow between input fields and component properties in Angular, activated by the FormsModule, alongside property binding, event binding, and string interpolation.

Create a persons service in Angular with @injectable and providedIn: root to enable dependency injection and hold and manage the persons data across components.

Learn how to use a service in an Angular component through dependency injection, wiring a person service in the constructor to supply the list of persons for rendering.

Remove a person by clicking, using a removePerson method and array filter with a dynamic condition in an Ionic Angular app, and understand view updates.

Explore the Ionic suite of web components in Angular apps, learn to configure and compose beautiful interfaces, and build a tiny web app to demo components.

Learn to use Ionic components as web components within HTML, configuring attributes and events to customize behavior. Understand how shadow DOM and CSS variables power these components, created withStencil.

Create an expense form using Ionic inputs with ion-item, a floating label, and ion-inputs for expense reason (text) and expense amount (number), wrapped in ion-card-content, ion-card-header, and ion-card-title.

Explore the three core Ionic component categories—output, layout, and input—and learn how to use elements like ion-grid, ion-card, and ion-button to manage width and organize content across screens.

Render a dynamic expenses list under an Ionic grid by creating ion-item elements with vanilla JavaScript and appending them to an ion-list, preparing for Angular to manage these components.

Explore Ionic with Angular by setting up an @ionic/angular app, integrating the Angular router and Ionic components, and using Ionic controllers to build native mobile apps with styling and theming.

Create a recipe list using Ionic components in Angular, define a recipe interface with id, title, imageUrl, and ingredients, and render items with ngFor using ion-list, ion-item, ion-avatar, and ion-img.

Set up Angular routes with lazy loading for a recipe detail page and handle dynamic segments. Use a shared Angular service to manage global recipe state across pages.

Extract the dynamic recipeId from the route with activated route and paramMap, subscribe to the param map observable, and load the recipe via the recipes service for display.

Inject the alert controller from @ionic/angular to create and present a confirmation alert for deleting a recipe. Configure header, message, and buttons, and handle cancel and delete actions with navigation.

Explore how Angular components and Ionic components work together in a single project, with wrappers from @ionic/angular, inputs, and proper module declarations for reusable recipe item components.

Explore debugging workflows for Ionic and Angular projects, covering browser and native app scenarios to identify, diagnose, and fix errors.

Debug and fix a deleted item issue in an Ionic Angular app by using console logs, understanding ngOnInit, and learning how Ionic page caching requires subscribing to recipe changes.

Learn how Ionic caches pages and uses ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, and ionViewDidLeave to manage visibility when navigating between pages; ngOnInit and ngOnDestroy may not run while a page remains cached.

Adjust routing configuration to create routes for auth, places, and bookings, defaulting to places, and set up a places module with a tab bar for find, discover, and offer pages.

Learn how to implement bottom tabs in an Ionic Angular app using ion-tabs, ion-tab-bar, and ion-tab-button, with Angular routing and lazy loading for discover and offers pages.

Set up a places data model and a places service in an Ionic app, then create dummy places and display them on a discover page.

Master back navigation in Ionic with ion back button and defaultRef. Route using the Angular router or NavController for accurate back animations and stack-aware behavior.

Navigate from the offers page to a new offer page via a toolbar ion button with an add icon and a dynamic router link, plus a back button.

Master Ionic components, attributes and slots, learn grid layouts with ion-grid, and implement ion-list, ion-item, ion-label, and virtual scrolling, plus controller components.

Learn how to control grid alignment in Ionic by managing row height, vertical alignment with align-items, and horizontal positioning with justify-content across responsive layouts.

Explore how ion-item, ion-label, ion-input, and ion-thumbnail create floating labels and underlined inputs inside or outside ion-list, with grid-based width control.

Explore virtual scrolling in Ionic to render only visible items within a viewport, reuse off-screen items, and boost performance for long or unpredictably sized lists on mobile and web.

Inject the loading controller from @ionic/angular in the auth page, create a loading overlay with a spinner and 'logging in', then present and dismiss after a timeout to block interaction.

Explore how Ionic apps style and theme themselves with css variables, a global theme of base colors and sizes, the grid and component attributes, and customization via css or Sass.

Use the official color generator in Ionic to produce contrast, shade, and tint variables from main, secondary, and tertiary colors. Copy the results and replace the root element.

Apply global and component styling in Ionic using the ion-toolbar color property and CSS variables, then use the var() function to align background and text colors with a contrast theme.

Explore user input requirements for an Ionic app, including authentication with email and password, sign-up/login toggle, booking date ranges, and a new offer form using template-driven and reactive forms.

Learn to implement a template-driven form in Angular with Ionic by wrapping inputs in a form, using ngModel and ngForm, and validating with required, email, and minlength.

Bind a button to an onSwitchAuthMode method to toggle between login and sign-up in an Ionic Angular app, using an isLogin state reflected in the button and ion-title.

Set up a new offer form with ion-grid, adding title, description, and price inputs in a responsive layout with floating labels, autocomplete, and a text area for description.

Add the ion-datetime date picker inside an ion-row and ion-item, bind min and max dates in ISO format, and wire an onCreateOffer button to log the offer creation.

Implement reactive form validation for a new offer form, display description errors when invalid or over 180 characters, and disable the submit button until the entire form is valid.

Edit the offer page with a reactive form in an Ionic Angular app, initializing a form for title and description using HTML markup and TypeScript logic, before updating data later.

Learn to implement a dual ion-datetime date picker in Ionic, with display and picker formats, min/max date bindings, dynamic constraints from the selected place, and form submission.