Strategies for transferring checkbox id in Materialize framework

Here is a checkbox that I am populating with different days of the week:

ts

daysofWeek = [
        { id: 0, name: 'Sunday' },
        { id: 1, name: 'Monday' },
        { id: 2, name: 'Tuesday' },
    ];

    days = [];

html

<div repeat.for="day of daysofWeek">
                    <md-checkbox checked.bind="days" model.bind="day">${day.name}</md-checkbox>
                
                    <ul>
                        <li repeat.for="day of days">${day.id}</li>
                    </ul>

                </div>

In my TypeScript code, I am trying to retrieve the ID of the checked days. However, it's returning:

0:{id:0,name:sunday}
1:{id:1,name:monday}

submit() {

     let daysofweek = this.days; // returns: 0:{id:0,name:sunday}1:{id:1,name:monday}

     if (this.repeat === true) {
         this.Instance({
        daysOfWeek: daysofweek, //how do i pass in here [0,1]
 });}

I attempted to modify the HTML like this:

<md-checkbox checked.bind="days" model.bind="day.id">${day.name}</md-checkbox>

but unfortunately, it did not work.

I also tried in TypeScript:

let daysofweek = this.days.id; 

However, I encountered an error stating that it couldn't find the property "id."

Answer №1

After some trial and error, I managed to find a solution for anyone else facing the same issue. Here's what worked for me:

const weekdays = this.days.map(day => day.id);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular's change detection is currently inactive

I need to toggle the visibility of a button based on the value of a boolean variable using the Output property. However, I am facing an issue where the button remains hidden even after the variable is updated with a true value. Parent Component.ts showE ...

Tips for integrating yarn add/npm install with monorepositories

I am attempting to retrieve a node package from a private monorepo on GitHub, structured similarly to this: monorepoProject --- subProjectA --- subProjectB Both subProjectA and subProjectB are TypeScript projects, following the layout depicted below: ...

Implementing reactivity in vue-chartjs using the Vue3 Composition API and data from an object

I have been struggling to update a Bar Graph dynamically whenever there is a change in the data object. Despite using reactive() and ref(), I am unable to achieve the desired functionality as the graph only updates upon page refresh. Below is my chart com ...

Create a PDF document utilizing Angular Ignite UI for Angular

Currently working with Angular TypeScript 12, I have successfully integrated Angular Ignite UI grid. However, I am in need of a way to export my grid into a PDF format using Igx-Grid. Does Igx-Grid support PDF exporting? If not, are there any alternative ...

Tips for utilizing ngModel with dynamic setter/getter properties

Currently, I am engaged in a project where users can generate applications dynamically. In order to achieve this, I allow components to specify their own properties as shown below. export class InputComponent extends GenericComponent implements OnInit { ...

Ways to utilize Subjects for sharing global information in Angular 6

I have been struggling to find an effective way to share data between two components that have the same parent in an Angular application. Currently, I am working with an Angular Material stepper where Step 1 contains one component and Step 2 contains anot ...

You are unable to utilize 'new' with an expression that does not have a call or construct signature in Typescript

As I venture into creating a SharePoint web part with the latest SharePoint framework that integrates the Microsoft Graph API as outlined here: I'm utilizing a sample for reference. The initial steps involved generating a new project using the Yeoma ...

How can you establish a TypeScript project that employs classes shared by both client and server applications?

I am working on a project that consists of two components: ServerApp (developed with nodejs using NTVS) and BrowserApp (an Html Typescript application). My goal is to share classes between both projects and have immediate intellisense support. Can you pr ...

Leverage the TypeScript compiler's output from a .NET library within a Blazor application by referencing it

I am currently facing an issue with three different levels: Main Issue: I have developed a Blazor WebAssembly (WASM) application that requires JavaScript, but I prefer to use TypeScript. To address this, I have added a tsconfig file and the TypeScript cod ...

TS: A shared function for objects sharing a consistent structure but with varied potential values for a specific property

In our application, we have implemented an app that consists of multiple resources such as Product, Cart, and Whatever. Each resource allows users to create activities through endpoints that have the same structure regardless of the specific resource being ...

Modifying the color of the chosen item - ion-select

Can anyone help me with changing the color of the selected item on ion-select? I've tried several solutions without success. Any suggestions? Documentation: https://ionicframework.com/docs/api/select I attempted to use the color property, but it did ...

Sweetalert is currently experiencing issues with its service functionality

I've searched around but can't find a clear solution to my issue. I need help with implementing sweetalert function in my component, specifically for data deletion using the service. https://i.sstatic.net/o6W2n.png Component Swal({ title: ...

Using an external HTML file to import a template into Vue.js single file components

I've been tackling a Vuejs project that involves using vue-property-decorator in single file components. I'm trying to figure out how to import the template from an external HTML (or different) file, but so far I haven't found a solution. I& ...

How can I solve export issues from index.ts after publishing to NPM?

I have a package called this package which contains an index.ts file. The corresponding index.d.ts file that is located in the directory node_modules/@fireflysemantics/slice has the following content: export { EStore } from './EStore'; export { ...

The version of the replication configuration schema does not support the use of ReplicationTime

I am currently working on setting up S3 Replication using the AWS CDK. I have referenced https://github.com/rogerchi/cdk-s3-bucketreplication/blob/main/src/index.ts as a starting point, and while it does create a replication rule, I am facing some issues c ...

Troubleshooting: Angular 2 component directive malfunctioning

I am new to Angular 2 and I'm trying to get my first app up and running using TypeScript. I have the app.component.ts file where I created a directive to another component called todos.component, but I'm encountering this error during compilation ...

Refreshing MongoDB data by utilizing values from an object

I am facing a challenge with my MongoDB collection structure: [ { "stock": "GOOGLE", "price": 0 }, { "stock": "FACEBOOK", "price": 0 } ] On the other hand, I have a Stock_P ...

How to turn off automatic password suggestions in Chrome and Firefox

Currently, I have integrated a 'change password' feature which includes fields for 'old password', 'new password', and 'retype password'. However, the autocomplete feature is suggesting passwords from other user acco ...

Exploring the utilization of ngModel within a tag that is selector-based

As a newcomer to Angular 2, I have encountered a challenge with forms that contain multiple text boxes, checkboxes, labels, and drop-downs. When including all these controls in my HTML, the page becomes too long. To address this issue, I would like to crea ...

Expanding external type declarations within Typescript

I am currently working with Typescript and the ant design library. My goal is to extend an existing interface by adding a single property. To start, I imported the original interface so you can see the folder structure: import { CollapseProps } from &apo ...