w3docs logo
Connexion

Angular (Full App) with Angular Material, Angularfire & NgRx

Use Angular, Angular Material, Angularfire (+ Firebase with Firestore) and NgRx to build a real Angular App

Start
  1. Courses
  3. Angular (Full App) with Angular Material, Angularfire & NgRx

Angular is an amazing frontend JavaScript & TypeScript framework with which you can build powerful web applications.

There are a lot of courses that dive deeply into Angular but sometimes you just want to build an entire app and see how it all works in practice. And you want to use all these great third-party packages that can add a lot of awesome functionalities to your Angular app!

course covers exactly that!

We'll build an entire, realistic app which looks absolutely beautiful, uses Google's Material Design and is extremely fast! Thanks to Firebase and Angularfire, we'll add real-time database functionalities and see our updates almost before we make them!

Behind the scenes, NgRx will be used - a Redux-inspired state management solution that can greatly enhance your Angular app.

What are you waiting for, this is what you'll get in detail:

  • A brief refresher on Angular, just in case you forgot how it works (or never learned it)
  • A detailed introduction into Angular Material, its docs and its usage
  • A realistic app that uses many Angular Material components
  • Examples for components like Datepickers, Sidenavs or the Material Data Table (incl. sorting, filtering and live updating!)
  • A real-time database connection powered by Firebase (using Firestore) and Angularfire
  • A better understanding of RxJS observables
  • State-of-the-art state management with the help of NgRx
  • And so much more!

This course is for you if you want to practice Angular, want to see it in action or want to learn it with the help of a 100% practical project!

Who this course is for:

  • Students who want to dive deeper into Angular and who want to build a real app with it
  • Students who want to practice Angular
  • Students who want a practical guide towards building Angular apps
  • Students interested in using Firebase, NgRx and/ or Angular Material

Section: Getting Started

1. Welcome & Introduction (2:12) Preview
2. What's Inside the Course? (2:24) Preview
3. Join our Online Learning Community (1:00) Preview
4. How To Get The Most Out Of This Course (2:15) Preview
5. Planning the App (1:37) Preview

Section: A Brief Angular Refresher (OPTIONAL)

6. Module Introduction (0:46)
7. What is Angular? (4:22)
8. MUST READ: Angular CLI - Latest Version (1:00)
9. Project Setup with the Angular CLI (4:23)
10. How an Angular App Starts and Works (5:39)
11. Adding Components (5:46)
12. Template Syntax (7:00)
13. Using Directives like ngFor and ngIf (4:22)
14. Custom Property & Event Binding (7:13)
15. Forms (4:17)
16. Understanding Services & Dependency Injection (11:10)
17. Angular Routing (6:52)
18. Where to Dive Deeper (0:30)
19. Useful Resources & Links (1:00)

Section: Angular Material

20. Module Introduction (3:17)
21. Understanding Angular Material Components (3:03)
22. Adding Angular Material to a Project (13:13)
23. Stay Up To Date! (0:52)
24. Our First Angular Material Component - The Button (10:11)
25. Why Do We Have To Import Everything Separately? (1:00)
26. Creating the Course App Structure (7:54)
27. Working on The Signup Form (5:04)
28. Flexbox - A Quick Refresher (9:43)
29. Controlling the Layout with @angular/flex-layout (6:05)
30. Adding & Configuring the Submit Button (5:06)
31. Implementing Hints and Validation Errors (on Forms) (9:38)
32. Adding a Datepicker (9:17)
33. Restricting Pickable Dates (3:27)
34. Adding a Checkbox (4:28)
35. Finishing the Form with Style (2:31)
36. Assignment - Angular Material (Problem) (1:34)
37. Assignment - Angular Material (Solution) (11:03)
38. Wrap Up (1:26)
39. Useful Resources & Links (1:00)

Section: Diving Deeper into Angular Material

40. Module Introduction (0:39)
41. Adding Navigation & a Sidenav (9:13)
42. Working on the Sidenav and Toolbar (5:13)
43. Styling the Sidenav (9:08)
44. Making the Page Responsive (5:08)
45. Adding Navigation Items (9:39)
46. Splitting the Navigation Into Components (9:39)
47. Working on the Welcome Screen (4:37)
48. Adding a Tabs Component (4:40)
49. Adding some "Cards" (6:20)
50. Adding a Dropdown Menu (6:00)
51. Adding a Spinner to the Training Screen (9:16)
52. Adding a Nice Exercise Timer (3:21)
53. Adding a Cancel Dialog Screen (6:11)
54. Passing Data to the Dialog (6:34)
55. Adding "Exit" and "Continue" Options (3:07)
56. Wrap Up (1:12)
57. Useful Resources & Links (1:00)

Section: Working with Data and Angular Material

58. Module Introduction (0:47)
59. Important: RxJS 6 (1:11)
60. IMPORTANT: Install rxjs-compat (1:00)
61. Code without rxjs-compat (1:00)
62. Implementing Authentication (18:37)
63. Assignment - Angular Material & Data (Problem) (0:34)
64. Assignment - Angular Material & Data (Solution) (3:20)
65. Routing & Authentication (4:38)
66. Route Protection (6:54)
67. Preparing the Exercise Data (4:12)
68. Injecting & Using the Training Service (4:34)
69. Setting an Active Exercise (3:14)
70. Controlling the Active Exercise (4:35)
71. Adding a Form to the Training Component (3:21)
72. Handling the Active Training via a Service (4:53)
73. RxJS 6 Update (1:00)
74. Handling "Complete" and "Cancel" Events (6:10)
75. Adding the Angular Material Data Table (14:07)
76. Adding Sorting to the Data Table (6:08)
77. Adding Filtering to the Data Table (5:20)
78. Data Table Filtering++ (1:00)
79. Adding Pagination to the Data Table (5:33)
80. Wrap Up (0:51)
81. Useful Resources & Links (1:00)

Section: Using Angularfire & Firebase

82. Module Introduction (0:59)
83. What is Firebase? (4:40)
84. Getting Started with Firebase (2:26)
85. What is Angularfire? (2:07)
86. RxJS Observables Refresher (6:24)
87. Diving into Firebase (7:35)
88. Connecting the App with AngularFire (12:23)
89. Operators & RxJS 6 (1:00)
90. Listening to Snapshot Changes (of Firestore, incl. Metadata) (7:21)
91. Restructuring the Code (6:27)
92. How Firebase Manages Subscriptions (2:52)
93. Storing Completed Exercises on Firestore (3:56)
94. Connecting the Data Table to Firestore (7:35)
95. Working with Documents (5:03)
96. Adding Real Authentication (Sign Up) (5:38)
97. Adding User Login (1:51)
98. Understanding Authentication in SPAs (4:02)
99. Configuring Firestore Security Rules (4:15)
100. Managing Firestore Subscriptions (5:31)
101. Reorganizing the Code (4:22)
102. Wrap Up (1:02)
103. Useful Resources & Links (1:00)

Section: Optimizing the App

104. Module Introduction (0:50)
105. Style Improvements & Error Handling (5:26)
106. Adding a Spinner (10:28)
107. Assignment - Optimizations (Problem) (0:49)
108. Assignment - Optimizations (Solution) (5:23)
109. Adding a Re-Usable Snackbar (Notification) (3:05)
110. Improving Error Handling (6:07)
111. Splitting the App Into Modules (7:00)
112. Assignment - Modules (Problem) (0:42)
113. Assignment - Modules (Solution) (5:17)
114. Optimizing Subscriptions (3:26)
115. Creating a SharedModule (4:40)
116. Splitting Up Routes (3:33)
117. Loading a Module Lazily (10:19)
118. Moving the Auth Guard (2:37)
119. Wrap Up (1:58)
120. Useful Resources & Links (1:00)

Section: Using NgRx for State Management

121. Module Introduction (4:04)
122. What is Redux - An Overview (1:59)
123. NgRx Core Concepts - A First Example (14:39)
124. Working with Multiple Reducers & Actions (12:35)
125. Dispatching Actions & Selecting State Slices (4:37)
126. Assignment - NgRx (Problem) (0:54)
127. Assignment - NgRx (Solution) (9:04)
128. What's Up with the RxJS Import Syntax? (1:00)
129. Adding an Auth Reducer (and Actions) (9:51)
130. Adding Auth Subscriptions (8:09)
131. Adding the Training Reducer and Actions with Payloads (12:14)
132. Lazy Loaded State (4:34)
133. Dispatching Training Actions (5:16)
134. Selecting Training State (6:33)
135. Selecting Single Values Correctly (7:30)
136. Connecting the Data Table (3:14)
137. Cleaning the Project Up (3:40)
138. Adding a small Bugfix (0:54)
139. Wrap Up (1:02)
140. Useful Resources & Links (1:00)

Section: Deploying the App

141. Introduction & Preparation (1:43)
142. Deploying the App to Firebase Hosting (4:10)
143. Useful Resources & Links (1:00)

Section: BONUS: Angular Material Themes

144. Module Introduction (0:23)
145. Understanding Angular Material Themes (1:38)
146. Adding the Theme with Angular 6 (1:00)
147. Customising an Angular Material Theme (5:48)
148. Useful Resources & Links (1:00)

Section: Round Up

149. Course Roundup (0:49)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.