• Wednesday , 1 April 2020

Bootstrap radio buttons in Angular

Code Canyon
https://i.ytimg.com/vi/IjEWmoOHHvM/hqdefault.jpg



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
http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html

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
http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html

Text version of the video
http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html

Slides
http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular_28.html

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

Original source

3d Ocean

Related Posts

16 Comments

  1. Swanidhi Singh
    February 22, 2020 at 17:23

    The solution to the problem starts at 3:40
    Thanks for the tutorial!

  2. rahul mukherjee
    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.

  3. Rikin Patel
    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!

  4. Huy Tạ
    February 22, 2020 at 17:23

    Your videos are very nice. Very helpful !!

  5. Belmiris
    February 22, 2020 at 17:23

    Thanks you for this!

  6. chandrasekar
    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

  7. deepak kumar
    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 ?

  8. Plam Ivanov
    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… 🐘👨‍💻👩‍🎓

  9. VISHAL JAISWAL
    February 22, 2020 at 17:23

    sir please make crud tutorials on angular with mvc using vscode

  10. Nagireddy Veeramreddy
    February 22, 2020 at 17:23

    Could you please start videos on ReactJS

  11. VISHAL JAISWAL
    February 22, 2020 at 17:23

    Great Explanation Sir..

  12. siva kumar
    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

  13. Bhuwan Maharjan
    February 22, 2020 at 17:23

    What an easy explanations, awesome!

  14. Irfan H Y
    February 22, 2020 at 17:23

    sir after long time new video out..!
    Eagerly waiting for your next video..!!!!

  15. Irfan H Y
    February 22, 2020 at 17:23

    Thank you..! sir …! you are d best teacher..!!

  16. Ashraful Alam
    February 22, 2020 at 17:23

    I watched your C# & also watching your ASP.NET tutorials.
    You make my day very easy.
    Thank you very much for your tutorials.

Leave A Comment

You must be logged in to post a comment.