Angular 7 with Angular Material and Firebase Cloud Firestore

What to expect from this module.

Understand what a NoSQL database is when compared to a traditional SQL (relational) database.

Learn about the features and benefits of using the Cloud Firestore database.

This lecture will present an overview of the different technologies we will be using in this course.

**Make sure to download my Angular CLI Cheat sheet available as a download in this lecture**

Application setup using the Angular CLI.

High level overview of how our application will be structured including modules and components.

Add Angular Material to our project.

Add a toolbar to our app using Angular Material schematics.

Create components, service and interface for our Weather module.

Create routing for the weather module. 

Add a form to search for cities.  Add a card to display search results.

Add the OpenWeather API to our project.

Display search results from the Open Weather API in our search component.

Transform the response we get from Open Weather API into an easy to manage object for the component.

Display error message below search field when we receive an error back.

Create a property bag service using GET and SET to communicate between components.

Add Google maps to our application.

Introduction to Firebase firestore, ngx-auth-firebase and AngularFire.  Includes setting up a new project in our firebase console.

Add firebase to our application and configure cloud firestore.

Add authentication to our app using ngx-auth-firebaseui.

Create our user module.  Add our components, routing and service files for this module.

Setup our user-auth service.  Configure the toolbar to display login and logout based on user's status.

Move login form to our login page.  Setup the user profile page.

Fix the display of our card to center description and save button.  Only display 'saved cities' link when user is logged in.

Learn about the benefits of using Firestore.  Understand how our city data will be structured as a sub-collection of documents in 'users' collection.

Review AngularFire docs and add City interface.

Add in the form to edit cities once they've been added for a user.

Create routing for saved-cities Component to send along the user's ID via the URL parameters.

Create logic to add a new city in firebase.service.ts file.

Create component logic to save a city for a logged in user.

Create a getUserCities method inside our firebase service to retrieve all the cities for a logged in user.

Create component logic to display all of a user's saved cities in our saved-cities component.

Create a method in our saved-cities component for displaying a city in our form with the ability to edit and update.

Create the service logic for updating a user's city.

Add logic in component and service to delete a city.

Add security rules for our database.  In this lecture we will walk through how to make sure that only authenticated users have access to our 'cities' sub-collection.

Finish adding security rules to our database to make sure only authenticated users can access our 'cities' sub-collection.

Enable offline support for our app.  This will allow users to make changes to the data inside our app when they are offline, then once they come back online any data altered will be updated in our database.

We are now ready to deploy our app to a live URL for the world to see!  This includes installing firebase tools, build a production ready Angular app, and deploying our app to a firebase URL.

This lecture explains how to keep your Angular project up to date.