Angular Real World Guide - Build Angular & Firebase Apps

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.

Explore Angular components as the building blocks of an application. Learn to structure, encapsulate logic, and create reusable, standalone components with Angular CLI and selectors.

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.

Create a new angular project with Angular CLI, verify Node.js versions, name the folder dev-pulse, choose CSS, and open the project in Visual Studio Code, tailwind CSS added next.

Install Tailwind CSS in your angular project and initialize the tailwind config. Configure template paths and add the Tailwind directives to styles.css, then run ng serve to verify utility classes.

Create a blog post page in Angular using router outlet and router link, enabling navbar navigation and saving posts to Google Firebase with markdown, slug, and published date.

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.

Learn how to implement validations in Angular reactive forms using built-in validators, custom validators, and dynamic error messages, and enable or disable submission based on form validity.

Explore Google Firebase basics and set up a dev project with Cloud Firestore, a NoSQL database, and prepare to connect with AngularFire in your Angular app.

Save form data to Google Firestore using the add doc method, creating blog posts collection. Store title, content, and published on date; slug from the title is hyphenated for SEO.

Learn how setDoc saves Firestore data with a custom document id, contrasting it with addDoc. The lecture demonstrates creating a document reference, saving title, content, date, and a slug.

Move the blog post creation logic from the component into a dedicated blog post service using AngularFire and Firestore, generating a hyphenated title slug as the document id.

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.

Create an authenticated navigation dropdown and a dashboard with blog posts and statistics, enabling edit and delete via CRUD operations, then show all posts on a public home page.

Create a dropdown navbar with logged in and logged out states, using a user service to control create post access, show user info, and enable router-based navigation.

Build a navbar dropdown that toggles with Angular signals, showing a user icon and a menu with dashboard, logout, and email when the user is logged in.

Create an Angular dashboard featuring a statistics component, display post counts, and pass data from parent to child using input properties and input functions, with blog data from Firestore.

Fetch and display a user's blog posts from Firestore in an Angular dashboard, convert timestamps to readable dates, and provide edit links using blog post slugs.

Fetch a blog post from Firestore by slug, pass it via input binding to the edit post, then populate a reactive form and update the post back to Firestore.

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.

Enable Google Firebase authentication in your Angular app by selecting email and password in the Google Firebase console, enable the provider, and prepare registration, login, and logout pages.

Create a register page and component in your Angular app, wire router links for login and register, and set up Firebase authentication flow with a logged-in state.

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.

Reuse the register page to build the login page's HTML template and reactive form, wiring imports, form controls, validators, and login submission readiness in Visual Studio Code.

Learn to implement user login with Google Firebase in Angular by submitting a login form, authenticating with AngularFire, and exposing the current user via a signal for navbar display.

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.

Attach the logged-in user id to each blog post by passing it from the user service into the create and update operations, then store it in Firestore.

Learn to build a home page in Angular that displays all blogs from a Firestore database, using a home component, a blog post service, and signals for reactive data.

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.

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.