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
Смотрите видео Address Book Project with Angular and Angular Material. Full CRUD Application. онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь DK Programming 02 Август 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,645 раз и оно понравилось 81 людям.