Address Book Project with Angular and Angular Material. Full CRUD Application.

In this video we are building an Address Book application with Angular and Angular Material. It is a full CRUD application where we display contacts, create contacts, update contacts and delete contacts. Links (resources) used in the video: GitHub Project link: Starting point: https://github.com/katkovd73/AddressB... Finished project: https://github.com/katkovd73/Address-... Angular Material Docs: https://material.angular.io Angular Material Dialogs: https://material.angular.io/component... Angular Material Buttons: https://material.angular.io/component... Angular Material Inputs: https://material.angular.io/component... Angular Material Table: https://material.angular.io/component... Angular Material Table - DataSource https://material.angular.io/component... Angular Material - How to refresh a data source (mat-table) - StackOverflow: https://stackoverflow.com/questions/4... Angular CLI - generate interface: https://angular.io/cli/generate#inter... Angular Reactive Forms: https://angular.io/guide/reactive-forms Angular Reactive Forms - Grouping form controls: https://angular.io/guide/reactive-for... Angular Validating form input: https://angular.io/guide/reactive-for... RxJS Library - Subjects https://www.learnrxjs.io/learn-rxjs/s... 0:00 Intro to the video 0:35 Project demo 2:05 Pulling the project from GitHub 2:55 Switching branches in VS Code 3:10 npm install command 4:48 Angular CLI generate service 5:40 Create an array of objects 6:45 Method to get all contacts 7:20 ngOnInit method 7:45 Create a constructor method and inject a service 8:45 Calling getContacts method 10:15 No Interface Demo 10:57 Introducing Interfaces 11:30 Generate Interface Using Angular CLI 13:43 Angular Material Table 16:17 Angular Material Table - defining columns 19:35 Angular Material Table - buttons Delete and Update 21:31 New Contact page 21:53 Angular Material Card 26:30 Angular Forms 27:10 Angular Reactive Forms 29:08 Angular Material Input 32:34 Media Query - mobile device view 33:29 Angular Reactive Forms - binding form model to the html template 34:43 Angular Reactive Forms - onSubmit() method 35:20 Cancel Button - redirect to a different page 36:57 Angular Reactive Forms - validation 40:41 Angular Reactive Forms - submit data 43:00 Finding the highest Id in an array of objects 44:43 Create a new object and add it to the array using push() method 45:30 Inject Service Using Constructor - updateContacts() method 47:02 Angular Reactive Forms - getting values from input controls 51:13 Update Button - update existing contact 51:53 Angular Material Dialog 59:08 Angular Material Dialog - input forms inside the dialog 1:01:22 Angular Material Dialog - styling input forms 1:04:26 Angular Material Dialog - Cancel button - close dialog with mat-dialog-close 1:05:52 Angular Material Dialog - populating controls with data 1:07:20 Angular Material Dialog - update data in the array of objects 1:08:20 Updating object in the array of objects by finding index of the object 1:13:06 Delete Button - delete existing contact 1:18:31 Delete object from the array of objects - deleteContact() method 1:21:08 Angular Reactive Forms - disable controls 1:21:48 Angular Reactive Forms - adjusting color of the disable controls 1:22:37 Angular Material Dialog - close dialog using dialogRef.close() 1:23:31 Addressing issue of the table not being updated after deleting contact 1:24:30 DataSource as a MatTableDataSource class instead of an array 1:26:32 Angular Material Table - refresh table using connect() and next() methods 1:28:10 Angular Material Dialog - dialogRef.afterClosed() method 1:28:50 Update Contact Dialog - fixing Update button 1:29:08 Conclusion