Bootstrap radio buttons in Angular

In this video we will discuss working with radio buttons in Angular Template Driven forms.

We want to include “Gender” radio buttons in the Create Employee form. When we select employee “Gender” using the radio buttons, the selected gender value should reflect in the Angular generated form model. Also, we we click the “Save” button we want the selected gender value to be logged to the console.

Please copy the HTML for radio buttons from our blog using the link below

Code Explanation
1. The name attribute is required to group the radio buttons as one unit and make the selection mutually exclusive. Make sure both the radio buttons have the same value for the “name” attribute. Otherwise the radio button selection won’t be mutually exclusive.

2. It is also important that you set the “value” attribute for each radio button. This value is posted to the server when the form is submitted.

While we are here, let’s also include a textbox to capture “Phone Number” and “Contact Preference” radio button.

Please copy the HTML from our blog using the link below

Text version of the video


Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

Original source

16 thoughts on “Bootstrap radio buttons in Angular

  • February 22, 2020 at 17:23

    This sort of video tutorial covers very basic and very important real life problems. To the point, hands-on, and awesome explanation. I love it.

  • February 22, 2020 at 17:23

    This is third series that I have been following of yours. Its been great journey of learning bus for me and I appreciate all the details and problem description that you have been laying out along with right approaches that people should take which really turns out key to understand why we follow best practice and not just blindly follow tutorials and examples as granted. I'm still early on this current series to comment about it, but so far so good. One minor thing I would like to point out is while encoding your videos consider normalizing volume of the video for consistent tutorial experience, for example: this video is low on volume while prior video had high volume for the audio level that user is listening on. Cheers!

  • February 22, 2020 at 17:23

    Nice Explanation…
    Doubt:- regarding radio buttons
    Que:- I have 3 employee details like you explained in list of employees bootstrapping prgm …. you are displaying name of the employee on top and remaining details on 2 columns
    Here my actual doubt is consider there should be a radio button for name after clicking/ check radio button how can I display details of employee ( like show/ hide)

    Please explain this concept

  • February 22, 2020 at 17:23

    wow, very good tutorial for beginners sir…hats off!! Is there code of this entire CRUD available for reference ?

  • February 22, 2020 at 17:23

    Happy New Year to your channel and all your followers.Last year I made several applications with ASP MVC and Angular.Thanks a lot for your help. Wish you all the best… πŸ˜πŸ‘¨β€πŸ’»πŸ‘©β€πŸŽ“

  • February 22, 2020 at 17:23

    hi sir. in every interviewr asking about progressive web apps and service worker in angular5. please make an video with example on offline browsing pws

Leave a Reply