Complete Angular Material Tutorial – CRUD Form Design
As part of the series – Complete Angular Material Tutorial, Here we design a form with angular material validation.
Discussed Points :
– Install Angular 6 Material
– Design CRUD Form in Angular Material
– Angular Material Validation
? Show Your Support ( Donation )
➤ (PayPal)
➤ (Cards, Gpay, Apple Pay, UPIs)
✨ Recommended Courses
► Angular :
► Typescript:
? Article on this same topic
►
? GitHub Repository
►
? Related Videos
1. – Form Design [ this one ]
2. – Firebase CRUD [ next video ]
3. – Angular Material Data Table
4. – Angular Material Popup
5. – Material Confirm Dialog
Subscribe to this channel Link to this video
► ►
? Must-Read Books for All Programmers
Code Complete(2nd Edition) :
The Art of Computer Programming :
Clean Code :
Design Patterns :
The Pragmatic Programmer :
? Purchase for Developers
? Laptops
MacBook Pro with M1 Chip :
Dell XPS 9570 :
Microsoft Surface:
MacBook Air with M1 Chip :
ASUS ZenBook 13 :
Lenovo Ideapad :
⌨️ Keyboard : Das 4 Professional :
? All Playlist
: Angular
: Asp.Net Core
: React
: Python
: Node.js
: Asp.Net MVC
: Flutter
: Web API
: MEAN Stack
: C# Tutorial
: Asp.Net WebForm
: C# WinForm
: MS SQL
: Crystal Report
: CG Exercises in C Program
? About this Channel
CodAffection – [ 1 hour content weekly ].
This channel is all about teaching and motivating software developers to build applications/
websites in various technologies/ programming languages like Angular, React, NodeJS, Python, Asp.Net, C#, JavaScript, SQL, etc.
► For Sponsorship Contact here:
? Social Media Links
Blog :
Facebook :
Twitter :
Youtube :
GitHub :
#AngularMaterial #Angular #CodAffection
https://goo.gl/RFY5C2 : Subscribe to CodAffection
https://goo.gl/3VQn29 : AM Firebase CRUD [Next Video]
https://goo.gl/VXhCoC : Angular Material Tutorial
https://goo.gl/bPcyXW : Buy me a Coffee.
Thank you so much for this awesome tutorial on Form designing using Angular and Firebase. This tutorial has been of immense help to me in achieving my goal. Tutorial was very informative and systematically explained in step by step way. Keep up with this effort of teaching and spreading coding knowledge to everyone!!!!
Excellent, as a noob I learned a lot of things from this video as compared to other videos. Thank You and please continue this work with Get, Post, Put and Delete API
Amazing and very usefull!!!
just two comments:
1.- I would recommend you to create an array for all the material (in the matearial module) and pass that array once to import and export. In that case you don’t need to duplicate the modules imported.
2.- For the required fields, instead of adding * to the placeholder you can add required to the field which I think is much better. e.g.
thanks for the comment. it’ll help me and the viewers in upcoming projects.
This is a really great instructional video, it really is. It got me off to a flying start. Thank you for your work.
Great tutorial! This example is a good way to start learning angular. I have encountered only two issues:
1. When clearing the form, I got an error in the console because the initialize method from the service was not recognized. Removed the providedIn: ‘root’ from the @Injectable and it worked;
2. import * as Material from “@angular/material” does not work anymore (angular 9). I had to import each module separately;
for me it is not working Property ‘initializeFormGroup’ does not exist
on type ‘FormGroup’. what to do help !
Thank you so much, very clear tutorial. Appreciate your efforts.
16:05 A private member cannot be accessed from the template when strict mode (Angular 12) is enabled, it should be declared public.
Does this tutorial work fine with angular 12 ???
your videos are so helpful sir ,can you do video on Curd operations using local storage in angular
Thankyou very much,Great Job mate,i implemented this in my project and its working smoothly.
You are amazing buddy, continue with your videos always!
Thanks for the comment.
Very clear and uderstandable. Thanks for the material.
Can I work with same components and libraries with angular 9 CLI?
Anyone who has insight about this, please share your expertise.
Thank you
Hello there. Thanks a bunch for the clean Tutorial. I have been using your directions on my personal project. It was god sent. However, I have a serious headache. I put your tutorial directions (heavily modified). However, when using the ROUTERS in angular for some reason view and viewchildren does not wait for any response and especially “MatSort” is not working along with the
Is it really related to router guards or something else? Can you check it?
Also there is a possiblity this problem may be also because of the @ViewChild changes in angular version 8?
Thank you so much bro? very usefull
Hi, how we can do validations for a number field, like that it should contain only whole numbers..if we enter some decimal, or negative integers, it should be validated,..i want this… Kindly help me in this
Very well explained! Thanks
You’re welcome!
Great tutorial, i have an question; where from come the content of application_structure.txt file? or How i can generate his content?
it is something manually typed.
Somewhere between this video and the next one in the sequence, the code for populating the Departments changes from a hard-coded list to one that comes from the Firebase database that is created during that next video. However, I’m over half way through the next video and do not see any discussion of how the “departments” table is populated so that it can supplant the previously hard-coded list of departments. How can I populate that Firebase database table so that the code for the next video works properly?
department table is render from firebase collection departments, which is discussed in second video here : https://youtu.be/hfhlzY3U27M?t=781. The firebase collection documents are inserted manually.(Other ways the video will be long one – If you watch this whole series. you create separate form for adding departments ). And then this shows how you can display department records from the firebase collection.
simple but powerful!
Thanks 🙂