Getting Started
- Welcome & Introduction
- What's Inside the Course?
- Join our Online Learning Community
- How To Get The Most Out Of This Course
- Planning the App
A Brief Angular Refresher (OPTIONAL)
- Module Introduction
- What is Angular?
- MUST READ: Angular CLI - Latest Version
- Project Setup with the Angular CLI
- How an Angular App Starts and Works
- Adding Components
- Template Syntax
- Using Directives like ngFor and ngIf
- Custom Property & Event Binding
- Forms
- Understanding Services & Dependency Injection
- Angular Routing
- Where to Dive Deeper
- Useful Resources & Links
Angular Material
- Module Introduction
- Understanding Angular Material Components
- Adding Angular Material to a Project
- Stay Up To Date!
- Our First Angular Material Component - The Button
- Why Do We Have To Import Everything Separately?
- Creating the Course App Structure
- Working on The Signup Form
- Flexbox - A Quick Refresher
- Controlling the Layout with @angular/flex-layout
- Adding & Configuring the Submit Button
- Implementing Hints and Validation Errors (on Forms)
- Adding a Datepicker
- Restricting Pickable Dates
- Adding a Checkbox
- Finishing the Form with Style
- Time to Practice - Angular Material
- Wrap Up
- Useful Resources & Links
Diving Deeper into Angular Material
- Module Introduction
- Adding Navigation & a Sidenav
- Working on the Sidenav and Toolbar
- Styling the Sidenav
- Making the Page Responsive
- Adding Navigation Items
- Splitting the Navigation Into Components
- Working on the Welcome Screen
- Adding a Tabs Component
- Adding some "Cards"
- Adding a Dropdown Menu
- Adding a Spinner to the Training Screen
- Adding a Nice Exercise Timer
- Adding a Cancel Dialog Screen
- Passing Data to the Dialog
- Adding "Exit" and "Continue" Options
- Wrap Up
- Useful Resources & Links
Working with Data and Angular Material
- Module Introduction
- Important: RxJS 6
- IMPORTANT: Install rxjs-compat
- Code without rxjs-compat
- Implementing Authentication
- Time to Practice - Angular Material & Data
- Routing & Authentication
- Route Protection
- Preparing the Exercise Data
- Injecting & Using the Training Service
- Setting an Active Exercise
- Controlling the Active Exercise
- Adding a Form to the Training Component
- Handling the Active Training via a Service
- RxJS 6 Update
- Handling "Complete" and "Cancel" Events
- Adding the Angular Material Data Table
- Adding Sorting to the Data Table
- Adding Filtering to the Data Table
- Data Table Filtering++
- Adding Pagination to the Data Table
- Wrap Up
- Useful Resources & Links
Using Angularfire & Firebase
- Module Introduction
- What is Firebase?
- Getting Started with Firebase
- What is Angularfire?
- RxJS Observables Refresher
- Diving into Firebase
- Listening to Value Changes (of Firestore)
- Operators & RxJS 6
- Listening to Snapshot Changes (of Firestore, incl. Metadata)
- Restructuring the Code
- How Firebase Manages Subscriptions
- Storing Completed Exercises on Firestore
- Connecting the Data Table to Firestore
- Working with Documents
- Adding Real Authentication (Sign Up)
