Learn Angular Material – Full Tutorial
Learn how to use Angular Material in this full tutorial course for beginners. Angular Material is a UI component library for Angular JS developers. Angular Material design components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation.
? Tutorial from Codevolution. Check out their YouTube channel:
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:42) Getting Started
⌨️ (0:10:01) Material Module
⌨️ (0:13:00) Typography
⌨️ (0:17:18) Button
⌨️ (0:23:35) Button Toggle
⌨️ (0:29:27) Icons
⌨️ (0:31:51) Badges
⌨️ (0:39:52) Progress Spinner
⌨️ (0:44:19) Navbar
⌨️ (0:47:51) Sidenav
⌨️ (0:57:39) Menu
⌨️ (1:10:00) List
⌨️ (1:14:47) Grid List
⌨️ (1:19:46) Expansion Panel
⌨️ (1:25:08) Cards
⌨️ (1:28:09) Tabs
⌨️ (1:31:12) Stepper
⌨️ (1:37:17) Input
⌨️ (1:43:60) Select
⌨️ (1:50:13) Autocomplete
⌨️ (2:00:38) Checkbox and Radio Button
⌨️ (2:05:18) Date Picker
⌨️ (2:11:48) Tooltip
⌨️ (2:15:05) Snackbar
⌨️ (2:24:08) Dialog
⌨️ (2:33:40) Data table
⌨️ (2:42:29) Exploring Data table
⌨️ (2:47:36) Data table Filtering
⌨️ (2:51:43) Data table Sorting
⌨️ (2:55:11) Data table Pagination
⌨️ (2:58:18) Virtual Scrolling
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
Thank you so much ! Really really good tutorial to get a good overview over Material, and feel confortable to start using it !! Really helpful !
Hey everyone, make sure to check out my channel for more content on Angular and React for complete beginners!
please update/re-record your angular full course to angular 12/13.
This comment got me!
(0:00:00) Introduction
(0:02:42) Getting Started
(0:10:01) Material Module
(0:13:00) Typography
(0:17:18) Button
(0:23:35) Button Toggle
(0:29:27) Icons
(0:31:51) Badges
(0:39:52) Progress Spinner
(0:44:19) Navbar
(0:47:51) Sidenav
(0:57:39) Menu
(1:10:00) List
(1:14:47) Grid List
(1:19:46) Expansion Panel
(1:25:08) Cards
(1:28:09) Tabs
(1:31:12) Stepper
(1:37:17) Input
(1:43:60) Select
(1-50:13) Autocomnlete
(2:00:38) Checkbox and Radio Button
(2:05:18) Date Picker
(2:11:48) Tooltip
(2:15:05) Snackbar
(2:24:08) Dialog
(2:33:40) Data table
(2:42:29) Exploring Data table
(2:47:36) Data table Filtering
(2:51:43) Data table Sorting
(2:55:11) Data table Pagination
(2:58:18) Virtual Scrolling
For all mobile users
From a mobile user
Bars or graphs?
Thanks so much!
You’re my Messiah ❤️
You’re an angel
Super.
Really useful, exhaustive and very easy to follow indeed. I’ve been replicating your instructions step by step, integrating and/or modifying the code when needed (for more recent Angular and Material versions that I’ve been using) and I had no trouble whatsoever. Thank you.
Excellent tutorial!!!! Thanks a lot for the beginner-friendly course. Most of the Angular Material tutorials I’ve been watching have been a bit confusing for me, but after watching this, I’ve clearly understood how to add the most commonly used Angular Material components to my Angular project. For anyone out there who’s just starting out in Angular Material, this is the time-saving eye-opener you need.
This tutorial is really good, contains a lot of accurate and useful. Thank you for making this available for free
PS: When you say “in simple English” followed by a “hey, this does that”, It’s really easy to understand.
This is just great! All explained very well in details especially for beginners! Thanks for spending time to create it!
Right to the point introduction to Angular Material – easy steps – and friendly presentations!! Thank’s a lot for publishing!!
Wonderful. Knowing only is not enough to be a good teacher. It has to be a set of knowledge, voice, tone, transfer skills, etc.
You have them all which makes you a great teacher.
Really simple to the point tutorial, Thanks for making it free 🙂
Great overview! Concise and just the right amount of depth
Thank you SO much for this. I was on a short deadline and had to learn this quick, this was a life saver.
this is a very good tutorial. one thing to watch out for however is even two years later, with the latest versions of angular and materials, some adjustments need to be made so the page compiles, but I have got it to work every time I faced a road block so don’t despair.
선생님의 멋지고 아름다운 강좌에 감사드립니다. 오래 전 부터 저는 선생님의 다른 많은 강좌에서, 다양한 학습 경험으로 많은 도움을 받았습니다. 이 영상에 그 모든 시간에 대하여 함께 감사의 인사를 처음 드립니다. 아무쪼록 선생님의 일상에 늘 행복과 기쁨이 가득하시기를 바라며 앞으로도 좋은 강좌를 부탁 드립니다. 본 3시간 강좌를 통하여 angular mattrial 에 대한 이해도가 매우 높아 졌습니다. 따라 가는 데 저는 24 시간이 소요 되었군요. 그럼 늘 일상에 행운이 함께하시길 …. 감사합니다.
Such a great tutorial! Just what I need !!!!
Most search grids in the app will reset the search results upon selecting the ‘Reset’ button. This usually also resets the column order and sorting if they had been changed. However, on the Member Search (My List) pages, the column and sorting are not reset.
Steps to Reproduce :-
Open the Member Search (My List) Managed tab
Select ‘Female’ from the Gender search option
Move the Gender column to the far left and sort by this column
Select the ‘Search’ button and notice the search results given
Select the ‘Reset’ button
Expected Result: The Search Results are cleared and the column location/sorting are reset
Actual Result: The Search Results are cleared but the column location/sorting are NOT reset.
Please can you help me out
Finally a great full tutorial about angular and material design. Thank you very much.
Great video, many thanks!
Could add a reminder about {static: true} at 2:53:24 to keep it up to date.
Great Simple on the point Explanation. Loved it. Subscibed!!
Thank you! It’s an excellent tutorial. but where can we download your source code?