Tips for making a Toggle button in Angular2

Question

Tips for making a Toggle button in Angular2

I'm exploring how to utilize a Radio button as a toggle in Angular2.

My goal is to capture the value of the Radio button when it changes without the need for creating a form.

Any assistance would be greatly appreciated.

[edit]:

This is what I tried:

<div class="form-group">
                <label for="gender">Gender</label><br>
                  <input type="radio" name="gender" value="male" checked> Male&nbsp;
                  <input type="radio" name="gender" value="female"> Female<br>
              </div>

I added this code within a form and was able to retrieve the gender value through form details. However, I want to achieve this without using a form.

javascript angularjs

Answer 1

Answer №1

Implement this code snippet in your component:

public gender = [
        'male',
        'female'
    ];
onGenderChange(e) {
        console.log(e);
    }

Add the following code to your HTML template:

<div *ngFor="let value of gender">
    <input (change)="onGenderChange($event.target.value)" type="radio" name="gender" value="{{ value }}">{{ value }}
</div>

Answer 2

Implement this code snippet in your component:

public gender = [
        'male',
        'female'
    ];
onGenderChange(e) {
        console.log(e);
    }

Add the following code to your HTML template:

<div *ngFor="let value of gender">
    <input (change)="onGenderChange($event.target.value)" type="radio" name="gender" value="{{ value }}">{{ value }}
</div>

Tips for making a Toggle button in Angular2

Answer №1

Similar questions

Enhance the structure of this array data model

Creating a universal alert function in AngularJS is a useful tool that can improve the functionality

Styling for Ajax Forms when traditional methods don't work

Jquery causing issues when used alongside another library

Display JSON values in sequence using Material-UI animations

What could be causing json_encode to return null values for form inputs?

The height of the browser action will not return to its original state

Incorporate additional libraries like jQuery into your Vue.js application

Tips for transferring the id from a delete button to a delete button in a popup dialog box

Command to conceal components for users visiting as guests

Setting a loader for when a component renders for the first time in Nuxt 3

Is the AngularJS `$http` cache capable of storing server errors in its cache?

Exploring the practical applications of Jade template along with AngularJS

Adding a directive with an ng-click dynamically

Utilizing Next.js to dynamically update data within a div element upon

Displaying JSON data in a popup window resembling a download prompt

What is the impact on performance when multiple observers are monitoring the same value?

Unable to retrieve props from server-side page to client-side component in a Next.js application router

Ways to fetch additional Product Cards using JSON and a nextPage parameter

What could be causing the absence of console.log output in my Netlify function logs?