> Canonical URL: https://codingcat.dev/course/angularmaterial # Angular Material | CodingCat.dev Course 🧶 CodingCat.dev Course8 Lessons[![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angular](/topic/angular)[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[â–¶ Watch Course Playlist on YouTube ↗](https://youtu.be/sOn3YMdpYR4)[Start Course →](/course/angularmaterial/lesson/firebase-project-hosting) # Angular Material ![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/75346ad2ae21a468aa2c2933847030d639cc62c2-1920x1080.png?w=1920&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson) This is a collection of lessons that I created for difficult areas of Angular and Angular Material. These examples may be growing outdated as we will create a full Angular course at some point. ## course lessons. 1 ### Section 1 - [1.1Firebase Project HostingHow to deploy your website to firebase hosting.![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebaseâ–¶ Video + LessonStart Lesson →](/course/angularmaterial/lesson/firebase-project-hosting) - [1.2Angular Material Router Outlet![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angularâ–¶ Video + LessonStart Lesson →](/course/angularmaterial/lesson/angular-material-router-outlet) - [1.3Firebase Authentication and Authorization![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebaseâ–¶ Video + LessonStart Lesson →](/course/angularmaterial/lesson/firebase-authentication-and-authorization) - [1.4Angular Material Theming![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angularâ–¶ Video + LessonStart Lesson →](/course/angularmaterial/lesson/angular-material-theming) - [1.5Angular Material Dynamic Navigation using Firestore![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angularâ–¶ Video + LessonStart Lesson →](/course/angularmaterial/lesson/angular-material-dynamic-navigation-using-firestore) - [1.6Angular Material Forms from FirestoreAngular Material Forms showing how to highlight erros on forms![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angularâ–¶ Video + LessonStart Lesson →](/course/angularmaterial/lesson/angular-material-forms-from-firestore) - [1.7Angular Material Reactive Forms Update FirestoreReactive Forms Showing how to update the form based on updates to data.![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angularâ–¶ Video + LessonStart Lesson →](/course/angularmaterial/lesson/angular-material-reactive-forms-update-firestore) - [1.8Angular Material Router AwarenessThis is about the Angular Router and how to use it with Angular Material![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angularâ–¶ Video + LessonStart Lesson →](/course/angularmaterial/lesson/angular-material-router-awareness) ✏️ Visual Architecture Diagram ## how this course connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: Angular Materialâś“ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Angular Material: start with Angular Material, implement Hands-On Implementation, and ship to production.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![The Firebase plugin is now available in Codex: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/4e2c8e99f437cb576972d406ec32394a82a19480-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2026-09-firebase-plugin-for-codex)September 29, 2026[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud) ### [The Firebase plugin is now available in Codex: Web Architecture & Implementation Guide](/post/firebase-2026-09-firebase-plugin-for-codex) Alex Patterson's hands-on web engineering breakdown of "The Firebase plugin is now available in Codex" (2026-09-28). Learn how to wire up Firebase, Google Cloud, Web Dev, AI in production web apps. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e83065d0a4e2f841ce64d3f4aea8ddbbf07e5cb9-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/php2shell-cve-2026-109618-ai-php-security-scramble)October 22, 2026[![](/logos/tags/aws-symbol-light.svg)![](/logos/tags/aws-symbol-dark.svg)AWS](/topic/aws)[![](/logos/tags/php-symbol-light.svg)![](/logos/tags/php-symbol-dark.svg)PHP](/topic/php) ### [PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](/post/php2shell-cve-2026-109618-ai-php-security-scramble) Two critical pre-authentication RCE flaws in PHP (CVE-2026-109618 and CVE-2026-109619), uncovered by AI models from OpenAI and Google Gemini, sparked a global patching scramble across 70% of the web. Here is how PHP2Shell works and how to patch your servers. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)