Angular Real World Guide - Build Angular & Firebase Apps

Name: Angular Real World Guide - Build Angular & Firebase Apps
Rating: 4.6 (110 reviews)

Build Real World Angular Project along with Google Firebase as backend for our project - Angular Web Development

Created bySameer Saini

Last updated 10/2025

English

English [Auto],

What you'll learn

Learn and Master Angular in a very practical approach
Learn Angular Essentials, for students who want to have a quick and basic refresher
Build real world web applications like a Blog website
Suitable for beginners who have some knowledge in JavaScript, HTML and CSS
Use Angular Components, Services, Standalone Components, Events, Signals, Inputs, etc
Learn and Master Google Firebase and add it to Real world Angular application
Authentication (Login, Register and Logout) using Google Firebase (Angular Fire Library)
CRUD for Angular , Save, Update and Delete data in a Google Firebase database
Image hosting - Upload and save images on Google Firebase Storage

Course content

6 sections • 52 lectures • 10h 41m total length

Introduction2:24
Install Visual Studio Code1:24
Download visual studio code
https://code.visualstudio.com/download
Install Visual Studio Code Extensions2:33
Visual studio code extensions
Angular Language Service
ESLint
Path Intellisense
Prettier - Code Formatter
Tailwind CSS Intellisense
Install Node Js and npm1:54
Download and Install Node JS
https://nodejs.org/dist/v22.12.0/node-v22.12.0-x64.msi
Install Angular CLI2:27
Install Angular CLI
npm install -g @angular/cli@19.0.6

Check installed version (Sometimes you have to close and open command prompt)
ng version
Github Code Repository2:14
https://github.com/sameer8saini/Udemy-Angular-Google-Firebase-Dev-Pulse

Let's Understand Angular2:54
Explore Angular's component-based architecture with components, including HTML template, TypeScript class, and CSS style, and learn two-way data binding, dependency injection, routing, services, and reactive programming with RxJS and signals.
Create New Angular Application15:56
Components - Building Blocks of an Angular Application21:22
Managing Dynamic Data - Component State and Behavior19:56
Rendering Dynamic Templates9:12
Conditionals and Loops18:52
Explore Angular's built in control flow statements to implement conditionals and loops, using if, else if, and else blocks to render templates and arrays with a for block.
User Event Handling10:13
Sharing Code or Logic using Services19:00

Create New Angular Application Using Angular CLI3:23
Install Tailwind CSS in Angular Application8:32
Create Navigation Menu or Navbar13:25
Logo is attached to the resources of this lecture
Create-Post Component, RouterOutlet and RouterLink14:23
Define Elements and Style Create-Post Page6:39
Create an Angular post page with title and content fields and a publish button, styled with Tailwind CSS and aligned to navigation. Future lessons cover Angular reactive forms and validation.
Angular Reactive Forms and Create Post Form10:11
Validations in Reactive Forms23:04
Environments11:12
To generate environments use:
ng g environments

To run the production environment:
ng serve --open

To run the development environment:
ng serve --open --configuration development
Google Firebase Intro and Setup8:04
Install AngularFire and Add Firebase Configuration10:44
Install Firebase Tools
npm i -g firebase-tools@13.11.2

To login to Firebase
firebase login

If Already LoggedIn and want to re-authenticate
firebase login --reauth

Install Angular Fire library
ng add @angular/fire@19.0.0
Save data using addDoc method to Firebase12:13
Save data using setDoc method to Firebase6:09
Creating BlogPost Service16:28
Add Markdown Editor and Preview16:02
Install Markdown Library (NGX-Markdown)
npm install ngx-markdown@19.0.0 marked@15.0.4 --save
Upload Files - CoverImage to BlogPost25:29
Upload a blog post cover image from an Angular app to Firebase storage, obtain its url, and save it in Firestore via reactive forms with a live preview.

Section Introduction2:01
Navbar - LoggedIn and LoggedOut Functionality and UserService14:55
Navbar Dropdown (use signals to reactively change state)17:55
Dashboard Page and Dashboard Statistics - Passing Data From Parent to Child Co19:18
Getting Collection Data From Firestore - BlogPost List28:49
Get Single Document From Firestore - Edit/Update BlogPost38:48
Delete Document From Firestore - Delete BlogPost12:38
Learn to delete a blog post from Firestore using Angular and AngularFire by slug, wiring a delete button, implementing delete service, and updating the dashboard.

Google Firebase Authentication Overview1:49
Enable Google Firebase Authentication3:40
Create Register Page/Component6:15
Register Page Template16:46
Register User14:40
Register a new user by wiring the register form to a user service that uses Google Firebase authentication to create a user with email and password and handles errors.
Create Login Page Component3:57
Login Page HTML Template5:28
User Login using Google Firebase30:58
Logout/Signout Functionality12:19
Learn how to implement logout in an Angular app with a logout component, routing, and a sign-out flow using AngularFireAuth to update the current user state.

Add User Details To Blogs9:47
Dashboard to show only loggedIn user created blogs9:22
Bulk/Batch Upload Data in Firestore Database18:38
There is a sample.json file attached to the resources of this lecture
Home Page - Display All Blogs21:02
Blog Details Page - Using Observables20:58
Blog Details Page - Using Signals2:55
Convert the blog details page from an observable reading the slug into a signal in the view post component and render the blog post details in the template.
Blog Details Page - Using RxResource11:55
Learn how to fetch blog post details using the RX resource method with RxJS interop in Angular, leveraging signals, loaders, and loading state to display data by slug.

Requirements

This course is for the enthusiast. If you know how web development works, know HTML, CSS and some Javascript, then this is the course for you.
A laptop or desktop
Free version of Visual studio code or any code editor of your choice

Description

*** USES the latest version of Angular with Angular Signals for reactivity ***

This course has been recorded in the latest version of Angular i.e. Angular 19.

You don't need 100+ hours to learn Angular. This course is especially designed for busy developers who want to learn Angular in a fast practical approach. We will use Angular to build a frontend website and we will use popular Google's Firebase as a backend to store the data for our frontend application.

This course will teach you the basics of Angular and then create a real world Angular application as you learn and improve on concepts that you implement in this application.

Learn and use Google Firebase by connecting your Angular application to Google Firebase backend.

Enroll in this course if you want to:

Create fast reactive frontend applications using Angular
Learn Angulars latest version with Angular Signals as reactivity
Learn Google Firebase that is a backend for your application to maintain the dynamic data for your application
Learn to build Angular applications using the latest Angular version, using Signals, Effects, Services, etc.
Grow your resume by learning a industry favorite frontend framework

What's inside this course:

Setting up Development Environment for Angular projects
Create new Angular application from scratch
Angular CLI
Components
Standalone components
Services
Reactive Forms
Form Validation
Data Binding
Dynamic Templates
Properties and Data Binding
Adding Packages
Routing
Pipes
Tailwind CSS
Google Firebase and a backend service to store data
Google Firebase Authentication
Google Firestore to store and upload files
Building front end application and integrate with backend database (Google Firebase)
Signals and Observables
Loops and Conditionals

30 Day Full Money Back Guarantee from Udemy

This course comes with a 30-day full money-back guarantee from Udemy

Who this course is for:

Beginner Web Developers who have some knowledge in HTML, CSS and Javascript

Angular Real World Guide - Build Angular & Firebase Apps

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 13min

Angular basics and essentials8 lectures • 1hr 57min

Dev Pulse - Angular and Google Firebase Real World Project15 lectures • 3hr 6min

CRUD Operations, Dashboard Page, Public pages7 lectures • 2hr 14min

Authentication using Google Firebase (Register, Login, Logout)9 lectures • 1hr 36min

Filter, Batch Create Data, Home page and Blog Details Page (Public pages)7 lectures • 1hr 35min

Requirements

Description

Who this course is for: