Ionic 4 - Build PWA and Mobile Apps with Angular

Explore Angular fundamentals to get started with Angular, install and use Angular's CLI, and create and generate components and services. Review directives and how to reload more deals.

Install Angular CLI globally with npm, verify the installation by checking the CLI version, and then create a new project using the Angular CLI.

Create a new Angular project with ng new in a chosen directory, install dependencies, switch styling to sass, and serve the app to view it in the browser.

Learn to add new components in an Ionic 4 Angular project using the CLI, generating components with inline templates and styles, and updating module declarations while skipping spec files.

Configure Angular routing with routes for home and about components, a router outlet, and routerLink navigation, plus styling the nav as inline items on a green background.

Explore how to lazily load Angular components and modules, configure routes with child routes, and observe on-demand loading during navigation to improve app performance.

Add a service in an Ionic 4 Angular app, fetch data from a backend API via a data service, and display typed to-do items in a template.

Using Angular's @Input and @Output decorators, pass data from parent to child and emit events from child back to the parent, as shown with a to-do list component.

Install and use the Ionic CLI to start a project, inspect the structure, and use generators to scaffold pages, components, and services. Explore the Ionic components and how auditing works.

Install the Ionic CLI on your local machine, verify that node and npm are installed, install Ionic globally with npm, and confirm the installation by running ionic -v.

Create a new Ionic app with the ionic start command using a chosen template (blank, tabs, or side menu), then build and preview in the browser using the device toolbar.

Understand the Ionic project structure for a tabs template, including src, assets, environments, angular.json, package.json, and lazy-loaded tab routing with page modules.

Learn how to generate pages with the Ionic generator command, create tabbed pages like home, to-do, about, and contact, and update routing, tabs, and icons in an Ionic Angular app.

Learn to build dynamic lists with Ionic components by creating ion-list, ion-item, and ion-label items, adding slots, indices, and icons, and enhancing with ion button and fab for actions.

Learn to build rich layouts with Ionic components, using ion-card with title, content, and images, and implement responsive grids with ion-grid and column sizing.

Create a shared Ionic component, export and import it into modules, and reuse it across pages using its selector, enabling the menu on the about and the contact pages.

Learn how to add tabs inside the Ionic side menu template by creating a new Ionic project, configuring routing, and implementing ion tabs with tab1, tab2, and tab3.

Add a side menu inside the Ionic 4 tabs template using a split pane, with a mobile overlay and a persistent left pane on larger screens.

Add a side menu and bottom tabs to the Ionic 4 blank template by creating a project, configuring routes, and implementing a split pane with a hamburger menu.

Create a news application using ionic, leveraging a new template and the news API to fetch articles from various sources.

Create a new Ionic project by selecting the template and Angular, install dependencies, open the project in VS Code, and run Ionic serve to view it in the browser.

Generate new pages with Ionic generate page, starting with top news and then headlines, sources, favorites, and settings, while updating the tabs menu and routing module.

Build a news page user interface with ionic cards and a responsive grid that scales from one column on mobile to four columns on large screens, using a fixed directive.

Explore how Ionic Lab lets you preview your app on iOS, Android, and Windows, compare platform differences, view icons, and open a full-screen preview to test on multiple devices.

Build a news service to fetch top headlines from a News API using an environment API key, and display articles on the top news page.

Explore how to use the async pipe to automatically subscribe and unsubscribe from observables in Angular, bind news data, and conditionally render images with ngIf and the safe navigation operator.

Learn how to reorganize an Ionic 4 project by moving pages into a dedicated pages directory, creating service and components folders, and updating imports to mirror Ionic 3 structure.

Create a reusable news article component and export it for use on multiple pages by wiring it into the components module and passing article data as input.

Set your api key using http params and pass additional parameters in subsequent requests, then verify the constructed query in the browser.

Finalize the top news page by upgrading the article component, format publication dates with an Angular date pipe, display the article description and source, and apply labels.

Show a loading spinner while fetching data by using a loading controller in a service, logging fetched articles, and dismissing the spinner when data loads or after a five-second timeout.

Learn to add pull to refresh in the app with a refresher, wire the top news page to load data, and close the spinner after two seconds.

Build a headlines page with a horizontal scrolling list of category chips using Ionic 4. Create, style, and color chips with margins and a framed primary look.

Learn to load category data from the backend in an Ionic 4 Angular app by converting category to lowercase, using a get data method with q parameter, and displaying articles.

Load category data on first load by calling a category service in the Ionic 4 Angular app, using the lifecycle and template rules to fetch and display news by category.

Explore how skeleton screens and skeleton text replace the leading indicator to improve perceived performance while fetching data in an Ionic 4 Angular app.

Wire a new service and a sources property to fetch and parse EPA sources, then render named sources in a responsive grid with skeleton screens.

Add a search pipe to filter sources by name in an Ionic 4 Angular app, including creating, importing, and wiring the pipe to the sources data.

Create a single source page to display articles from a specific source, using Ionic generate page and routing, and add a back button for navigation.

Select a source by its id and fetch its articles on the source page, injecting the service and reading the id from the route to feed the articles component.

Learn to add a source to favorites with Ionic 4's item sliding; wrap items in a sliding container and trigger console output on left-to-right slides.

Learn how to save items to favorites using Ionic storage in an Angular app by installing the storage plugin, injecting the storage service, and saving to local storage.

Learn how to add a refresh button to the favorites list in an Ionic 4 app, wire a click listener, and call a get favorites method to update the UI.

Learn to implement a toast message in Ionic 4, add items to favorites, and display a toast confirmation via the toast controller with an async method.

Remove a source from favorites in an Ionic 4 app by locating its index in the start sources array, removing at that index, and updating storage with the updated favorites.

Learn to implement a settings page in an Ionic 4 Angular app, including a clear favorites button that uses a storage service to reset favorites and update the favorites view.

Discover publishing your Ionic 4 app as a progressive web app, reuse the same code base, and deploy to iOS, desktop via Electron, or with Cordova or Capacitor.

Add progressive web app support to an Ionic 4 app using an Angular schematic, configure the service worker and manifest, and build for production for web deployment.

Learn to deploy a pwa to firebase hosting by creating a firebase project, installing firebase tools, logging in, and running firebase deploy to publish the app.

Install a progressive web app on a mobile device by updating the manifest and icons, deploying on Firebase, and adding the app to the home screen via Chrome.

Learn to run your Ionic app inside the Android emulator by adding the platform with Cordova and launching and navigating the app as on a device.

Explore how to use Ionic for cross-platform progressive applications with a single code base, and look ahead to future possibilities while engaging with the Q&A section.