Angular Material Progress Spinner | Angular Material Tutorial 23

welcome to our channel right click education in  today's video we will learn how we can implement   angular material spinner progressor spinner  so let's get started open your chrome   type angular material open material.angular.io  which is the official website of angular material   click on component scroll down to the left click on this progress spinner so you can see  right this is how a progress spinner looks like   okay so in order to implement it first copy  the import that is map progress spinner model   so we will copy it paste it in the app.model.ts  under the ng module import section copy this map progress spinner module scroll down under the ng  module import section paste it   so we are done with the import part  now let's go to our.component.html so first we will do math progress spinner okay and we will give value equals to 40 or 50 so let's see the ui how it looks like   localhost 42.0 so you can see right  it's fifty percent uh you can see right if you make it hundred again go to ui you  can see hundred right now let's remove this and use matte spinner okay let's go to our ui you can see this  spinner right so this spinner is called   in determinate spinner okay so you  see it's it it keeps on going right   so we can customize this spinner according to our  need so let's say value okay give value equals to suppose 75 okay now let's go so you can see this spinner right now  we can make it determinate we can make   it indeterminate we can change the colors  so in order to do that we need to do some   imports okay in the app.component.ts  so go to app.component.ts   for reference we will use the official  website click on overview sorry examples okay go to ts file so import these both things okay so open our app.component.ts paste it so theme  palette will help us to give customize the color   of the spinner progress spinner mode will uh help  us to change the mode of a spinner okay so let's so let's copy all these three properties from here paste it here now what we can do we can bind  all three property to our matter spinner okay   so remove this value press enter okay now let's bind mode equals to mode color equals to color value equals to value okay value now if you see mode is mode so this mode   is defined here if you see color is primary  we have given mode we have given determinate   and value we have given 50 so now let's  go to ui and see how it looks like so if you see it is 50 color is primary and  mode is determinate now let's change it to indeterminate okay and you can see  right now this spinner is indeterminate   let's again go to vs code and  change it to 100 suppose okay now if you see right it's hundred let's again go and change this primary to one okay  so it will give the red color so you   can see the color has been changed  right you can also make it to ascend right so you can see now the color  of this spinner has been changed so   in this way you can customize the color mode   and value of a spinner so this is how we can  implement angular material progress spinner   in our application that's it for this video  thanks for watching and if you haven't subscribe   our channel please do subscribe our channel  and press the bell icon to get more updates

Channel: RightClick Programming

Views: 2,606

Keywords: angular, angular material, angular material tutorial, spinner, angular material spinner not showing, progress spinner angular material example, angular material progress spinner not showing, how to make progress spinner, how to make spinner in angular material

Id: s0E0DUFIuxE

Length: 8min 6sec (486 seconds)

Published: Fri Feb 04 2022