Database Service Create a specialized Firestore database service for Kanban boards This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below. *Enrollment provides full access to this course (and updates) for life. Or Signup for Unlimited PRO Access đŧ Login to Watch đ Firestore Data Model CDK Drag and Drop đ Separate all database logic into a dedicated service. Database Service file_type_ng_component_ts database.service.ts import { Injectable } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import { AngularFirestore } from '@angular/fire/firestore'; import * as firebase from 'firebase/app'; import { switchMap, map } from 'rxjs/operators'; import { Board, Task } from './board.model'; @Injectable({ providedIn: 'root' }) export class BoardService { constructor(private afAuth: AngularFireAuth, private db: AngularFirestore) {} /** * Creates a new board for the current user */ async createBoard(data: Board) { const user = await this.afAuth.auth.currentUser; return this.db.collection('boards').add({ ...data, uid: user.uid, tasks: [{ description: 'Hello!', label: 'yellow' }] }); } /** * Delete board */ deleteBoard(boardId: string) { return this.db .collection('boards') .doc(boardId) .delete(); } /** * Updates the tasks on board */ updateTasks(boardId: string, tasks: Task[]) { return this.db .collection('boards') .doc(boardId) .update({ tasks }); } /** * Remove a specifc task from the board */ removeTask(boardId: string, task: Task) { return this.db .collection('boards') .doc(boardId) .update({ tasks: firebase.firestore.FieldValue.arrayRemove(task) }); } /** * Get all boards owned by current user */ getUserBoards() { return this.afAuth.authState.pipe( switchMap(user => { if (user) { return this.db .collection<Board>('boards', ref => ref.where('uid', '==', user.uid).orderBy('priority') ) .valueChanges({ idField: 'id' }); } else { return []; } }) ); } /** * Run a batch write to change the priority of each board for sorting */ sortBoards(boards: Board[]) { const db = firebase.firestore(); const batch = db.batch(); const refs = boards.map(b => db.collection('boards').doc(b.id)); refs.forEach((ref, idx) => batch.update(ref, { priority: idx })); batch.commit(); } } 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