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
Watch video Address Book Project with Angular and Angular Material. Full CRUD Application. online without registration, duration hours minute second in high quality. This video was added by user DK Programming 02 August 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,645 once and liked it 81 people.