Add Radio Button to Template for Sign on Linux For Free

in this lecture let's learn how to create a radio button in template driven form in angular and how to set a default value for that radio button so here in this form we are displaying these radio buttons so we are displaying these radio buttons for this gender and we are displaying this radio button using this html now instead of displaying these radio buttons using this html let's learn how we can display a radio button by creating a property in the typescript class so here let's go to appcomponent.ts file and here let's create a new property and let's call it gender and this gender is going to store an array and this array is going to have some objects as its element so each object here is going to have an id property and let's say the id is one and it is also going to have a value property and here let's say the value is male okay and let's also make this id a string value okay in the same way let's also create two objects for female and for other okay so here let's set the id to 2 and let's set the value to female and here let's set the id to 3. and let's set the value to other okay so here we have created a gender property which is an array and this array has three objects an object for male gender an object for female and an object for other now let's go to the view and from here i am going to remove these htmls okay and i will keep this html here so we are going to use this html as a template now first i want to show this text gender and then i want to show the gender male female and other with the radio button okay so what i'm going to do is after this level i'm going to create a span and let's move this input element and this label inside this span okay and on this span let's go ahead and let's use ng for directive and inside these double quotes let's create a variable let's call it gen off and here we want to loop over this gender array so let's copy this property name and let's use it here okay then here the input type should be radio and for the id let's use the id property of this gender object so let's say gen dot id then for the value let's use the value property of the gender object so let's say gen dot value and here let's keep the name as gender and in the label where we're displaying this text here also we want to use the value property of the gender object so let's say gen dot value with this let's save the changes let's go to the web page and here you will notice that this male female and other gender radio buttons are still being displayed but this time we are displaying these radio buttons using this gender property now let's say we also want to set a default value for this gender so let's say default value should be mail for that what we can do is here we can create a property and let's call this property may be default gender and let's set it to mail okay then let's go ahead and let's bind this default gender on this input element so here we are using this ng model so on this ng model let's do property binding by...