Meet Angular Material Introduction to Angular Material and design systems This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below. SignUp for Unlimited PRO Access OR *Enrollment provides full access to this course (and updates) for life. đŧ Login to Watch đ App Overview Schematics đ We’re ready to start building the app! It’s ideal to kick off any new project with a solid foundation for design. An app that looks good from the day one will keep you happy and motivated throughout the development process. Steps Step 1 - Install Angular Material Install Angular Material command line ng add @angular/material Step 2 - Customize your Theme Colors (Optional) Customize your Theme Generate a Color Pallette Example of a custom color pallette. file_type_scss2 styles.scss $custom-orange: ( 50: #fff3e0, 100: #ffe0b2, 200: #ffcc80, 300: #ffb74d, 400: #ffa726, 500: #ff9800, 600: #fb8c00, 700: #f57c00, 800: #ef6c00, 900: #e65100, A100: #ffd180, A200: #ffab40, A400: #ff9100, A700: #ff6d00, contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: $black-87-opacity, 400: $black-87-opacity, 500: white, 600: white, 700: white, 800: white, 900: white, A100: $black-87-opacity, A200: $black-87-opacity, A400: $black-87-opacity, A700: white, ) ); $firestarter-demo-primary: mat-palette($custom-orange); Bonus Video Chapters Optional Beginner Project đļ 1 Angular Tutorial for Beginners Build a Tic-Tac-Toe game with Angular free 20:23 Intro đ 2 Resources Source code and course resources free 1:51 ⥠3 CLI Introduction to the Angular CLI free 4:01 âŖī¸ 4 Anatomy The purpose of every file in Angular free 5:13 đĻ 5 Components An introduction to Components, Directives, and Pipes free 13:51 đ 6 Dependency Injection and Services What is dependency injection (DI) and why is it so useful? free 3:18 đ§Š 7 Modules How NgModules help manage code and complexity free 2:41 App đģ 8 App Overview Overview of the organization and architecture of the Firestarter demo app. 2:50 đ¨ 9 Meet Angular Material Introduction to Angular Material and design systems 5:21 đī¸ 10 Schematics Using Angular Material Schematics 1:10 đ¤ 11 Shared Module Share component and Material Modules efficiently throughout the app 3:59 đ 12 App Navigation Shell Add a responsive navigation shell to the app 8:45 đ 13 Routing Create a home page configured with the Angular Router. 2:56 đĨ 14 Firebase Setup Add Firebase and @angular/fire to your app 2:42 Users 𤸠15 Lazy Loaded Login Feature Configure the router for lazy-loaded user module, aka code splitting. 3:54 đ¤ 16 Google SignIn Create a directive that extends Google SignIn to any button or element 4:37 đ§ 17 Email Password Auth SignUp, SignIn, and reset a password with Reactive Forms 11:32 đŽ 18 Auth Guard Protect routes with guards. 4:59 Kanban đą 19 Kanban Module Kanban feature module setup 2:10 đĨ 20 Firestore Data Model Firestore database model for kanban boards and backend security rules. 4:48 đĨ 21 Database Service Create a specialized Firestore database service for Kanban boards 7:39 đą 22 CDK Drag and Drop Add drag and drop capabilities to a Material Card 6:36 đą 23 Drag and Drop Animation Animate the CDK Drag and Drop events with CSS transitions 3:06 đą 24 Dialogs Create, update, delete data from a Material Dialog modal popup 8:03 đī¸ 25 Delete Button Create a confirmable delete button 3:10 Server-side Rendering â 26 Server-side Rendering - What? Why? How? Key concepts related to SSR and Angular Universal 2:57 đˇī¸ 27 SEO Service Create a service for Open Graph & Twitter meta tags. 5:32 đĻ 28 Angular Universal with NestJS Add server-side rendering to Angular with Nest.js 2:56 đ 29 Prerendering Prerender with Angular Universal using a vanilla JS script 4:04 đŠī¸ 30 Angular Universal on Google Cloud Run Deploy to Angular Universal to Google Cloud Run and connect it to Firebase Hosting 5:55