Angular 7 with Angular Material and Firebase Cloud Firestore

Learn Angular 7+ by example with Cloud Firestore and Angular Material. Includes CRUD, Authentication, Routing, HTTP.

3.60 (187 reviews)
Udemy
platform
English
language
Web Development
category
Patrick Schroeder
instructor
Angular 7 with Angular Material and Firebase Cloud Firestore
813
students
3 hours
content
Dec 2018
last update
$29.99
regular price

What you will learn

Build web apps using Angular 7+

How to use the Angular CLI

Add styling using Angular Material

Generate Angular modules, forms, components, and routes

Retrieve data from the OpenWeatherMaps API

Integrate Google Maps API

Work with the Cloud Firestore NoSQL Database

Authenticate users

Store and retrieve user's data

Perform CRUD operations

Deploy to production on a live URL!

Why take this course?

Learn to build blazing fast single-page web apps using Angular, Angular Material and Cloud Firestore database.

This course is made in a learn by example format.  You will use the Angular CLI to build a dynamic and interesting application.  Once complete, you will create a production build and push your application to a live URL.

Application Features Include:

Authentication, CRUD, Data Persistence to Firestore, App Deployment


Who is this course for?

Made with the beginner in mind, this course is structured to help you fully grasp every terminal command and line of code.


What Angular concepts will I learn?

You will learn about all the major concepts needed to build interesting apps, including: 

Forms, Routing, HTTP, Components, Modules and Interfaces


Which external libraries are covered?

The app we build will include the following libraries:

Angular Material with Flex-Layout for styling, Google Maps, AngularFire for Firestore, Ngx-Auth-FirebaseUI for Authentication


Which API's will be used?

We will be using the OpenWeatherMaps API to request real-time city data.  Then persist this data to our Firestore database for logged in users.


What skills will I have once I have completed?

After completing this course, you will have a strong understanding of Angular 7+ with typescript.  This includes how to structure your application files and folders, how to use the Angular CLI and what is considered best practices when building Angular apps.  Additionally, you will be able to create production ready applications that authorize users, are secure and persist data.

Content

Introduction

Course Overview
App Demo
Keeping Updated (Angular 7+)

Understanding NoSQL and Firestore

Module Intro
NoSQL Databases Explained
Cloud Firestore Features

App Setup

Module Intro
Overview of Technologies
App Setup
App Structure
Angular Material
Toolbar

Weather Module

Module Intro
Weather Module Seutp
Weather Routing
Search Form and Card
Open Weather API Setup
Display Open Weather Data
Transform Response
Error Message
Property Bag Service
Google Maps

Firebase Setup

Module Intro
Overview of Firebase and AngularFire
Firebase Setup
Add Authentication

User Authentication

Module Intro
User Module Setup
User Service & Toolbar
Login and Profile Page
CSS Fixes

Firestore CRUD

Intro to Module
Firestore Data Structure
City Interface
Create Form to Edit Cities
Saved Cities Routing
Add City - Service Logic
Add City - Component Logic
Get User Cities
Display User Cities
Update City - Component
Update City - Service
Delete a City

Secure and Deploy

Intro to Module
Security Rules - Part 1
Security Rules - Part 2
Enable Persistence
Deploy!
NG Update

Screenshots

Angular 7 with Angular Material and Firebase Cloud Firestore - Screenshot_01Angular 7 with Angular Material and Firebase Cloud Firestore - Screenshot_02Angular 7 with Angular Material and Firebase Cloud Firestore - Screenshot_03Angular 7 with Angular Material and Firebase Cloud Firestore - Screenshot_04

Reviews

Eric
October 11, 2023
I didnt read the title properly, I was looking for angularfire 7. not angular 7 But I am sure I will learn from it.
Maisih
October 30, 2021
It's the first time to learn property bag service. It's really easy and useful to deliver the parameter
Armando
June 19, 2020
This is a straightforward hands-on course to get acquainted with building an Angular/Material application. There are few explanations, so I would not recommend this course for a beginner.
Tom
June 10, 2019
Good course but moves a bit quick without explaining "why" for most of it. Gives a good practical project to get started though.
Jonathan
May 26, 2019
Excellent course, helped me build a good foundation with Angular and Google Firestore. Few courses offer the level of detail on Firestore that this one did, nice work!
Oscar
May 6, 2019
Great experience so far. My knowledge regarding Angular was zero, but I've been learning step by step. I would like to go faster, but the learning curve is doing its job.
Ryann
April 21, 2019
I bought 2 other Angular courses prior to this, this class had the most up to date information and covered the main tool set I was looking to use (Angular, Material & Firebase). I was able to make a lot of progress quickly following this course.
Stavros
February 22, 2019
This is the best working project tutorial on angular and firestore by far! The tutor has deep experience in everything and he transfers all this experience to the student.
Daniel
February 6, 2019
the fast copy and paste code from different module make it difficult to follow for users, less familiar with these techniques. Specially the snippets and what these includes. Otherwise good content.
Joshua
February 5, 2019
To the point, works well with Ionic 4 also. Although i'm going to rework it to remove the material toolbar and sidenav and utilize Ionic's toolbar and sidebar directly. Note that enablePersistence() hasn't added to the git provided. Thank you for the course, it was well put together.
David
February 2, 2019
Patrick does an acceptable of describing what to do. In other words, create a file and enter this, this and this. Unfortunately, he offers little or no explanation why. Or how the pieces fit together. That said, this probably isn't Patrick's best effort. I assume he has or will do better in other courses.
Zulfiqar
January 22, 2019
I was able to follow and code along with out any problems. I cannot say that about other udemy courses. Code along with out failure is very important for us. Thanks again for awesome course.
Jonard
January 14, 2019
There are some code that breaks the linter or the app. Example, the firebase service's getCity and updateCity functions' cityId parameter should be a string instead of City object. Though, the program still run but if you really think it through, we are not passing an object to the cityId. Another thing is Weather Search Component template's on "click" call should not have the query variable. This is the reason why when we run "ng build" the compiler fails.
Pierre
January 13, 2019
I liked 1- the presentation 2- Extensive and progressive code downloads 3- Very quick and accurate response to a questions I asked
Bill
December 30, 2018
Yes, covered what I need. It's a long and complex series of related lessons and I'm taking a while to get through it but it is very thorough and I will be well prepared when I finish it.

Charts

Price

Angular 7 with Angular Material and Firebase Cloud Firestore - Price chart

Rating

Angular 7 with Angular Material and Firebase Cloud Firestore - Ratings chart

Enrollment distribution

Angular 7 with Angular Material and Firebase Cloud Firestore - Distribution chart

Related Topics

Angular
Typescript
Firebase
Angular Material
1481956
udemy ID
12/25/2017
course created date
11/22/2019
course indexed date
Bot
course submited by