Learn Angular Material - Full Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ธ.ค. 2024

ความคิดเห็น • 164

  • @Codevolution
    @Codevolution 5 ปีที่แล้ว +127

    Hey everyone, make sure to check out my channel for more content on Angular and React for complete beginners!

    • @BrajeshKumar-ez8zs
      @BrajeshKumar-ez8zs 3 ปีที่แล้ว

      This comment got me!

    • @mdzakariamasud8326
      @mdzakariamasud8326 3 ปีที่แล้ว +4

      please update/re-record your angular full course to angular 12/13.

  • @amalpb1811
    @amalpb1811 5 ปีที่แล้ว +258

    (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

    • @NikhilThakralYeah
      @NikhilThakralYeah 4 ปีที่แล้ว +3

      u, sir, are a legend

    • @manasagrawal7145
      @manasagrawal7145 4 ปีที่แล้ว +1

      A great effort by you and really helpful. Thank you for this.

    • @arwahsapi
      @arwahsapi 4 ปีที่แล้ว

      Thanks so much! Your effort won't be forgotten!

    • @dimasjimenez3396
      @dimasjimenez3396 4 ปีที่แล้ว

      Thank you sir, much appreciate it!

    • @Palawanboy66
      @Palawanboy66 4 ปีที่แล้ว

      thanks

  • @rezataba6204
    @rezataba6204 4 ปีที่แล้ว +6

    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.

  • @kenkioqqo
    @kenkioqqo 3 ปีที่แล้ว +10

    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.

  • @moayedmustafa3228
    @moayedmustafa3228 3 ปีที่แล้ว +1

    this man out here saving my job

  • @pedrosoares7273
    @pedrosoares7273 4 ปีที่แล้ว +28

    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.

  • @nicolapigozzo
    @nicolapigozzo 5 ปีที่แล้ว +6

    Finally a great full tutorial about angular and material design. Thank you very much.

  • @harry_allen
    @harry_allen 3 ปีที่แล้ว +12

    Will there be an updated video for Angular Material 12?

  • @taamcyat
    @taamcyat 2 ปีที่แล้ว

    I'm so happy i watched this video!!! Great work!!!

  • @raymondmouthaan6335
    @raymondmouthaan6335 4 ปีที่แล้ว +6

    This is just great! All explained very well in details especially for beginners! Thanks for spending time to create it!

  • @rowehnakori
    @rowehnakori 4 ปีที่แล้ว +3

    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.

  • @andyt597
    @andyt597 2 ปีที่แล้ว +1

    Thank you SO much for this. I was on a short deadline and had to learn this quick, this was a life saver.

  • @misterrodger
    @misterrodger 4 ปีที่แล้ว +3

    Great video, many thanks!
    Could add a reminder about {static: true} at 2:53:24 to keep it up to date.

  • @onigvd77
    @onigvd77 3 ปีที่แล้ว +4

    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.

  • @ItzDanielSoftware
    @ItzDanielSoftware 3 ปีที่แล้ว

    coming from React MUI angular material was weird and I needed a video to understand, I appreciate it!

  • @hebaelwazan
    @hebaelwazan ปีที่แล้ว

    This is a great reference video that i know i will check a lot. Thank you.

  • @何奇-m5v
    @何奇-m5v 4 ปีที่แล้ว +5

    Such a great tutorial! Just what I need !!!!

  • @SuperToughnut
    @SuperToughnut 2 ปีที่แล้ว

    Thank you so much for this video! I need to checkout your other videos!

  • @expertreviews1112
    @expertreviews1112 3 ปีที่แล้ว

    Exxxtra ordinary content quality!!! More power to you Vishwas!!!

  • @priyamganguly
    @priyamganguly ปีที่แล้ว

    Excellent tutorial! Learnt a ream from it, especially how to apply the logic in the typescript files. Now my knowledge base on Angular and Material is even stronger. Thanks to Vishwas for bring out this amazing tutorial for us.

  • @plagiari1
    @plagiari1 2 ปีที่แล้ว

    well organized video , step by step instructions very easy to follow indeed even for beginners! Thank you a lot

  • @whatareyoulookingfor6789
    @whatareyoulookingfor6789 3 ปีที่แล้ว

    Learn Angular Material awesome!

  • @hansschenker
    @hansschenker 4 ปีที่แล้ว +6

    Right to the point introduction to Angular Material - easy steps - and friendly presentations!! Thank's a lot for publishing!!

  • @SaadAbbasi
    @SaadAbbasi 4 ปีที่แล้ว +5

    Really simple to the point tutorial, Thanks for making it free :-)

  • @maxreturn34
    @maxreturn34 4 ปีที่แล้ว +1

    Great overview! Concise and just the right amount of depth

  • @TheSkyCries1
    @TheSkyCries1 2 ปีที่แล้ว

    This was awesome, it runs though a lot of the stuff I need to know! Thanks a lot.

  • @marudhuraj6709
    @marudhuraj6709 4 ปีที่แล้ว +2

    Perfect tutorial, thanks for posting this it's very use full when i kickstart my project.

  • @ScottGrunwald
    @ScottGrunwald 5 ปีที่แล้ว +4

    This is soooo helpful!! Thanks so much!

  • @luizfederico9861
    @luizfederico9861 2 ปีที่แล้ว

    great material, thanks a lot!

  • @dishagupta7446
    @dishagupta7446 4 ปีที่แล้ว +3

    This tutorial was just perfect

  • @ratheeshjames9909
    @ratheeshjames9909 3 ปีที่แล้ว

    Great Simple on the point Explanation. Loved it. Subscibed!!

  • @sanjeevbc9784
    @sanjeevbc9784 4 ปีที่แล้ว

    very nice introduction on angular material

  • @tortue34170
    @tortue34170 3 ปีที่แล้ว

    Thank you so much ! Really really good tutorial to get a good overview over Material, and feel confortable to start using it !! Really helpful !

  • @VyomKinght
    @VyomKinght 3 ปีที่แล้ว

    Thank you, Mr. Sashi Tharoor Sir. This tutorial was very helpful for me.

  • @theRusDerevnya
    @theRusDerevnya 4 ปีที่แล้ว +1

    Great video! Thank you so much!

  • @DavidHernandez-pg5zc
    @DavidHernandez-pg5zc 2 ปีที่แล้ว +1

    Hi. 21:30, colors not showed
    Angular CLI: 14.0.5
    Node: 17.0.0
    @angular/material 14.0.4
    @schematics/angular 14.0.5
    rxjs 7.5.5
    typescript 4.7.4

  • @atmospheric_b
    @atmospheric_b 4 ปีที่แล้ว

    Nice one! Thanks

  • @cnguyen883
    @cnguyen883 3 ปีที่แล้ว

    save much time for me to understand Material UI, thanks!

  • @markotansic2859
    @markotansic2859 5 ปีที่แล้ว +2

    Thanks i will start learning tonight :)))

  • @dotnetrfidhub2135
    @dotnetrfidhub2135 2 ปีที่แล้ว

    Well explained your tutorial was awesome

  • @srinirao8234
    @srinirao8234 4 ปีที่แล้ว

    Great tutorial.very useful.Thanks .

  • @parsamh78
    @parsamh78 2 ปีที่แล้ว

    thanks u a lot for this useful tutorial

  • @dawednesru5353
    @dawednesru5353 4 ปีที่แล้ว

    thank you so much, Sir! Liked and Subscribed to Codevolution channel.

  • @hamkumar4707
    @hamkumar4707 4 ปีที่แล้ว

    Tutorial is awesome bro...

  • @MerryEveryday
    @MerryEveryday 2 ปีที่แล้ว

    Thanks for the tutorial

  • @TheDruzzila
    @TheDruzzila 3 ปีที่แล้ว

    you did avodat kodesh explaining everything in the docs well done sub++++++

  • @nw_rye
    @nw_rye 4 ปีที่แล้ว

    Very helpful, thank you for sharing!

  • @rikisax63
    @rikisax63 2 ปีที่แล้ว

    Very very good tutorial. Thank you sir. I'd like to know which extension do you use to change open and close tag in one time as i seen.

  • @leticiamarianivalera9696
    @leticiamarianivalera9696 4 ปีที่แล้ว

    Excellent material! Thank you so much for sharing this video.

  • @billtjohnson6747
    @billtjohnson6747 3 ปีที่แล้ว

    Very helpful !

  • @soufianlakhdar3420
    @soufianlakhdar3420 4 ปีที่แล้ว

    Thank u for this tuto, All explained in detail!

  • @buddysteve5543
    @buddysteve5543 3 ปีที่แล้ว

    You make it look so easy!

    • @shriyamsharma2082
      @shriyamsharma2082 3 ปีที่แล้ว

      does table filtering work in your project??

    • @buddysteve5543
      @buddysteve5543 3 ปีที่แล้ว

      @@shriyamsharma2082 Who said I had a project? I only watched the video!

    • @shriyamsharma2082
      @shriyamsharma2082 3 ปีที่แล้ว

      @@buddysteve5543 oh I thought you have implemented along with watching the video

    • @buddysteve5543
      @buddysteve5543 3 ปีที่แล้ว

      @@shriyamsharma2082 Again, where did you get that from my comment? Stop making assumptions and read what I wrote!

  • @arwahsapi
    @arwahsapi 4 ปีที่แล้ว

    Thanks a lot! This is super awesome tutorial!

  • @juancarlosverase
    @juancarlosverase 4 ปีที่แล้ว

    Great work!

  • @martinarrua975
    @martinarrua975 4 ปีที่แล้ว

    Amazing video. Thank you so much for share it

  • @manasagrawal7145
    @manasagrawal7145 4 ปีที่แล้ว

    Awesome tutorial

  • @zhdanvadim9536
    @zhdanvadim9536 3 ปีที่แล้ว

    Thanks!

  • @abhijeetraj7952
    @abhijeetraj7952 4 ปีที่แล้ว

    Super Helpful!!

  • @codeme8016
    @codeme8016 4 ปีที่แล้ว +1

    Is there any way to like this video several times?
    *With each section I'd like to hit the like button again.* I feel so disabled and sad I can't.
    At least I've already mentioned this video in my TH-cam Angular-Firebase tutorial.

  • @bithibithi4989
    @bithibithi4989 2 ปีที่แล้ว

    Wonderful vedio

  • @vadimkit8442
    @vadimkit8442 4 ปีที่แล้ว

    Большое спасибоо за Туториал !)

  • @dikshyantdash7040
    @dikshyantdash7040 4 ปีที่แล้ว

    It's really an awesome tutorial.

  • @DivyaPrakash002
    @DivyaPrakash002 4 ปีที่แล้ว

    excellent described

  • @juanhuenchun8908
    @juanhuenchun8908 4 ปีที่แล้ว

    This is a very good information. Thanks for share your knowledge. Suscribed!

  • @ahmedjawad7350
    @ahmedjawad7350 4 ปีที่แล้ว

    geeat help.. thanks alot

  • @hebrux
    @hebrux ปีที่แล้ว

    For the date picker, what do you do if the date is off by a day rather than the actual date you inputted?

  • @thatchipmunksings
    @thatchipmunksings 4 ปีที่แล้ว

    Thank you! 🙏❤️

  • @carlyb7061
    @carlyb7061 5 ปีที่แล้ว

    Thank you for another amazing video. :)

  • @JavaAidTutorials
    @JavaAidTutorials 5 ปีที่แล้ว +1

    Nice video..!!

  • @allprowebdesigns917
    @allprowebdesigns917 2 ปีที่แล้ว

    Which would you recommend today Angular or React as a primary front-end framework?

  • @debasisnath9860
    @debasisnath9860 3 ปีที่แล้ว

    ❤️ 👌 🙏 🚀 Nice tutorial, Thank you!!!

  • @vadimkit8442
    @vadimkit8442 4 ปีที่แล้ว

    Спасибо большое за гайд!)))))

  • @parisfrancepp
    @parisfrancepp 3 ปีที่แล้ว

    La DSI de JCS vous fait un bisou !

  • @deepakbawa1367
    @deepakbawa1367 2 ปีที่แล้ว

    Update the tutorial with angular 13 and create a blog blog with both front end and Bach end admin panels 👍

  • @danielpreza4159
    @danielpreza4159 3 ปีที่แล้ว

    mat-sidenav when you weant to open it fron an external component you have to click twice to open it, how we can fix it?

  • @owenjaspervargas1408
    @owenjaspervargas1408 5 ปีที่แล้ว

    THANK YOU SO MUCH :)

  • @shaleshkumari5490
    @shaleshkumari5490 3 ปีที่แล้ว

    which key used for triple equal in same plane ?????? (39:07)

  • @sayantanchatterjee4486
    @sayantanchatterjee4486 4 ปีที่แล้ว

    Awesome tutorial on angular material.

  • @ADSNGreenLife
    @ADSNGreenLife 4 ปีที่แล้ว

    I have question here what if we have multiple module for various folder then do I need to add this material module reference in each folder module file??

  • @acurasoft1898
    @acurasoft1898 2 ปีที่แล้ว

    Hello Eng Can You Help Me -> AggregateException: One or more errors occurred. (One or more errors occurred. (The npm script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: This version of CLI is only compatible with Angular versions ^13.0.0,
    but Angular version 8.2.12 was found instead.

  • @fkas6278
    @fkas6278 5 ปีที่แล้ว

    Thank you so much

  • @programistuff
    @programistuff 3 ปีที่แล้ว

    Great video, but it's not a good idea to create separate module for material.

  • @pedrosoares7273
    @pedrosoares7273 4 ปีที่แล้ว

    Is the data table sorting working properly for you guys? followed all the steps correctly and it does not sort.

  • @SumitYadav-rg4di
    @SumitYadav-rg4di 4 ปีที่แล้ว

    can we use it with bootstrap grid system? and what if want to add navbar collapsable system to this angular material navbar, how doest that happen? A hint will be enough for me

  • @yashwinsanghi
    @yashwinsanghi 5 ปีที่แล้ว

    Your content is great ..🎉🎉🎉 can you tell us the name of the file icon package you are using in your VS Code

  • @ankurgupta4466
    @ankurgupta4466 3 ปีที่แล้ว

    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

  • @azklvc9
    @azklvc9 4 ปีที่แล้ว

    Thanks you

  • @MadanzaBand
    @MadanzaBand 5 ปีที่แล้ว +1

    Thank you thank you thank you

  • @TimeoutMegagameplays
    @TimeoutMegagameplays 5 ปีที่แล้ว +1

    Great crash course.

  • @harjeetsingh-pk8wz
    @harjeetsingh-pk8wz 5 ปีที่แล้ว +3

    Is basic knowledge of Javascript required for this course or I can start directly with Angular?

    • @versatilecontent4244
      @versatilecontent4244 5 ปีที่แล้ว +2

      Yes , before angular you should have good JavaScript knowledge, Json, how to crud data using api and you don't need any video to lean angular material , it's just copy paste from the documentation and really easy to edit...

    • @mquanit
      @mquanit 5 ปีที่แล้ว

      You should know basic javascript for learning angular.

    • @additionaddict5524
      @additionaddict5524 5 ปีที่แล้ว +2

      @@mquanit I disagree. I learned javascript at the same time as learning Angular

    • @mquanit
      @mquanit 5 ปีที่แล้ว

      @@additionaddict5524 ok, but still you are learning JS and that's what matters.

    • @IvanRandomDude
      @IvanRandomDude 4 ปีที่แล้ว

      @@mquanit You mean typescript?

  • @jysngify
    @jysngify 4 ปีที่แล้ว

    great!!

  • @captainroxchiefit9149
    @captainroxchiefit9149 4 ปีที่แล้ว

    how are you able to edit multiple instances of an object? like when you changed all three "MaterialComponents" to just "Material"

  • @phantomKE
    @phantomKE 5 ปีที่แล้ว

    Thank you

  • @shapedthought
    @shapedthought 4 ปีที่แล้ว

    Really good if you x 2 the speed

  • @monishavenkatesan3623
    @monishavenkatesan3623 3 ปีที่แล้ว

    In a nav bar i haa problem: parameter ' state ' implicity has an 'any' type

  • @Boris1990ua
    @Boris1990ua 3 ปีที่แล้ว

    I need second like button!

  • @MrLiangdo
    @MrLiangdo 3 ปีที่แล้ว

    Thank you! It's an excellent tutorial. but where can we download your source code?

  • @lookahead279
    @lookahead279 5 ปีที่แล้ว

    How can I use a form of different component in mat-stepper?
    For eg: Registration component uses mat stepper that has several steps step1,step2.step3 etc ...
    step#1 has “basicdetailsform” of “basic-details-component”.
    Step#2 has “demographicDetailsForm” of “demographic-component”.
    Step#3 has “selectionItemForm” of “selcetion-item-component”
    So ooonnn.......
    I’ve tried using viewchild and get form() .
    Now it ended up throwing an error
    “ExpressionChangedAfterItHasBeenCheckedError”

  • @smitdarji4639
    @smitdarji4639 4 ปีที่แล้ว

    ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
    Module not found: Error: Can't resolve 'C:\Users\Bhumi\Desktop\angular
    ode_modules\bootstrap\dist\css\bootstrap.min.css' in 'C:\Users\Bhumi\Desktop\angular\project'
    how to fix this error

  • @charnelito
    @charnelito 5 ปีที่แล้ว

    thanks