Angular Material Radio Button | Angular Material Tutorial 9
Angular Material Radio Button | Angular Material Tutorial 9
Step by step tutorial on how to use Angular Material Radio Button. The Angular Material radio-button is an Angular Directive, are used to show radio buttons in the application. The mat-radio-group is the grouping container for mat-radio-button elements
Please LIKE and SUBSCRIBE if we brought value to your time. COMMENT below with any thoughts or questions.
#RaviBhai #angularmaterialfullcourse
00:00 Intro video
00:15 Introduction to angular material radio-button
01:56 Basic Mat Radio-button Implementation.
05:15 Radio button using ngModel
09:11 Summary
My Computer : https://amzn.to/3i6NQUB
My Smart Watch : https://amzn.to/3w0UML2
My Mic : https://amzn.to/36bXcM0
For Reference :-
https://material.angular.io/component…
Playlist Link :-
• Angular Material Full Course Tutorial
Content
15.68 -> welcome to our channel right click education in
today's video we will learn how we can implement
22.64 -> angular material radio button which is used to
basically select between two options so let's see
34.08 -> how we can implement it in order to uh show you
38.4 -> how the angular material radio button
looks let's go to angular material website
45.44 -> angular material search in your chrome then
click on this material rectangular dot io
53.44 -> link which is official website of
angular material click on components
60.56 -> okay and then
65.28 -> since we are going to learn how to implement
radio button click on this radio button
72.8 -> so you can see right if you have two options
and you want to select one of them then you
79.12 -> can use radio button okay so let's see if i
click on this right so it will get selected
89.76 -> so we can use this radio button in forms where
we want to select between two options suppose
99.76 -> we are selecting whether a particular person is
male or female right so you can give two options
106.56 -> as radio button and whatever your user selects
it will get reflected in the form right so
118.8 -> without
121.44 -> getting late let's start how we can
implement it so click on this api
127.28 -> copy this import that is matte radio model
133.28 -> copy to go to your vs code
open your app.component.ts
143.36 -> paste this input here
153.28 -> okay copy this matte radio module
167.44 -> so now our import part is done okay now
let's implement the html part of it so go to
181.12 -> matte radio button thing here
187.6 -> scroll up
190.32 -> go to example
194.56 -> scroll down
200.32 -> so we will implement first basic radio
button okay click on this blue code
210.32 -> select this copy it
217.28 -> go to your app.component.html in vs code paste
to this so what we have done we have basically
224.56 -> taken a matte radio group okay inside
that mad radio group we will provide the
234.72 -> matte radio button so we have given here two
buttons or two options and you can select one
245.84 -> of them okay so let's see how it looks like
on ui let's compile the application in this uh
258.8 -> it will take a few seconds to compile the
application then we will go to our chrome
264.56 -> browser and see on localhost whatever you know
how it looks so it's compiled let's go to our
276 -> chrome open new tab colors you can see right we
have two option and you can click on any one of
286.48 -> it right so this is how this matte radio button
is implemented inside this matte radio group okay
300.08 -> we will see also how we can
implement it in other way okay
308.96 -> so let's see
313.04 -> if you see here
316.88 -> they have
320.24 -> implemented matte radio button using ng model
okay so ng model is used for two-way winding
331.92 -> so let's implement it also so we
will copy this part of code okay
342.24 -> go to our vs code
345.92 -> and also paste it now you can see
right they have this ng for loop here
356.72 -> if you see matte radio button inside matte
radio button they have this ng for loop
363.6 -> let's season of season so we need to have a season
array and we can select one of the season right so
374.4 -> let's again go to our official site click on ts we
have this favorite season which is of type string
384 -> and this season's array which has the
different season as elements go to your ts file
392 -> component.ts i will remove
this pre-written code paste it
402.64 -> okay we will put its type as any okay
416.72 -> and now let's go toward the web saying cannot
bind to ng model since it's it isn't a known
429.28 -> property of matte radio group if matte radio
group is an angular component it has ng model
437.6 -> input then verify that it is part of model
okay we are getting this error right and
448.4 -> we will get this error eventually because us
we must have done something wrong right so
456.32 -> how we can fix it so the issue is we haven't
implemented forms model yet right if you
466.64 -> go to your app.module.ts you
can see we haven't implemented
471.2 -> imported the forms model that's why we are getting
this error regarding ng module so basically it's
480.72 -> not understanding what is ndmg model which is
part of forms model so let's import forms model
488.88 -> first then let's see if it resolves our problem or
not okay copy this forms module paste it here okay
505.52 -> now as you can see right you can
see we have these four seasons here
513.92 -> and if you want you can select any of the
season it will appear here because it's
519.52 -> minded right select summer you can see here summer
right so this is the second implementation that
529.52 -> we can do with the radio button okay so
i will give you somebody whatever i have
540.16 -> i have explained to you so first we implemented
the mat radio group and inside that matte radio
549.68 -> group okay this is matt radio group and inside
this matter radio group we have this matte radio
558.08 -> button implemented right so the one way
was the basic implementation you can hard
566.48 -> code the mac radio button and also you can
use this math radio button with ng model
576.88 -> okay so for the ng model you need to
import forms model okay because forms model
587.28 -> provides you ng module which is used for
two-way winding so you need to import that
594.64 -> one and then you can implement uh ng module in
your project okay we have also seen how we can
605.12 -> change the position of levels using
this level position before or after okay
618.16 -> you can see that also
622.16 -> so in this way uh we can implement this matte
radio button okay so that's it for this video
638.64 -> if you haven't subscribe our channel
please subscribe our channel for getting
643.6 -> more updates and also press bell icon to get
the notification of whatever video we post
650.32 -> thanks for watching have a nice day
Source: https://www.youtube.com/watch?v=8YNaWDDgQjA