Displaying data from multiple checkboxes in an Angular application using an array

I'm currently facing an issue with displaying checked data in an Array within my Angular application. Upon clicking the checkbox, I receive a true value, but unfortunately, the data does not display as it contains null values.

For reference, here is a link to the StackBlitz demo: https://stackblitz.com/edit/angular-ivy-kt2uag?file=src%2Fapp%2Fapp.component.ts

Code snippet:

component.ts

The following functions are being utilized:

fetchSelectedItems() {
    this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {
      console.log(value.selected);
      return value.selected === true;
    });
  }

  fetchCheckedIDs() {
    this.checkedIDs = [];
    this.checkboxesDataList.forEach((value, index) => {
      if ((value.selected)) {
        this.checkedIDs.push(value.code);
      }
    });
  }

Answer №1

Make sure to call the fetchCheckedIDs() method not only in ngOnInit(){}, but also in your fetchSelectedItems():

  fetchSelectedItems() {
    this.fetchCheckedIDs(); //don't forget to call here
    this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {
      console.log(value.selected);
      return value.selected === true;
    });
  }

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

When it comes to utilizing BehaviorSubject.value and AsyncSubject in RXJS, it is essential to understand

As a newcomer to RXJS, I am seeking advice on whether my current approach is considered best practice. My situation involves an API that returns a list of countries which needs to be utilized across multiple components. The external API can sometimes be sl ...

How can you implement Higher Order Components as a decorator in TypeScript?

Currently, I am attempting to develop a decorator that accepts an argument from React's Context provider. When creating a higher-order component (HOC), the process is straightforward: interface DashboardProps { user: User; } class Dashboard exten ...

Mapping angular URLs with routes for the initial loading process

I recently encountered an issue with my Angular project that has multiple routes, such as /category/fruit/apple. When I try to access the full URL directly like http://myserver/category/fruit/apple, it returns a 404 error. This is because there is no confi ...

Is there a forEach loop supported in Angular2? If so, why does it display all objects with the same value?

Hello everyone, I'm currently facing an issue with getting server response objects and passing them into a new Array object. In the code snippet below, you can see that when I try to print these newly passed objects using a forEach loop, they appear a ...

The Ionic serve command fails to recognize and reflect any saved changes, leading to a lack of automatic reloading

Recently, I encountered a strange issue while using my ionic 2 application. Whenever I execute the ionic serve command, it launches the server on localhost and produces the following output: [12:00:45] ionic-app-scripts 0.0.45 [12:00:46] watch started ...

How can I display a modal with image options and image selection using Ionic 4?

Currently, I am developing an Ionic 4 Angular application and implementing an Ionic modal feature. I would like to include images in the modal, so that when a user clicks on them, they are displayed. ...

Creating a new Angular2 component for a separate URL path

In my scenario, I have a PageComponent that gets refreshed with new data when the URL changes (using PageService). It currently utilizes the same PageComponent object, but I am looking to make it a new object when the URL changes. 1st Question: How can ...

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

Exporting a object in Angular2 Using TypeScript

I've been working on a small Angular2 application using Typescript and things have been going smoothly so far. My goal is to utilize a file called config that contains all the necessary settings for the application. Here's the file in question: ...

angular click triggers the following content

How can I make the following content appear when clicked? I have a list of content that displays up to 20 items, but I want to show the rest when clicked. I have created the nextMovieList method for this purpose. import { Component, OnInit } from ' ...

Exploring the integration of Styled-components in NextJs13 for server-side rendering

ERROR MESSAGE: The server encountered an error. The specific error message is: TypeError: createContext only works in Client Components. To resolve this issue, add the "use client" directive at the top of the file. More information can be found here i ...

Guide on importing a markdown file (.md) into a TypeScript project

I've been attempting to import readme files in TypeScript, but I keep encountering the error message "module not found." Here is my TypeScript code: import * as readme from "./README.md"; // I'm receiving an error saying module not found I als ...

Troubleshooting Jasmine Unit Testing issues with the ng-select library

Recently, I integrated the ng-select component from Github into my Angular application without encountering any console errors during runtime. It functions as expected; however, issues arise when running unit tests with Jasmine. To incorporate NgSelectMod ...

I'm looking for some information on Typescript static functions - can anyone help me

Below is the code I am currently working with: class BaseClass { // includes a static method static someMethod() { } } class ChildClass extends BaseClass{ } class AnotherClass { protected variable: BaseClass; // Works fine with type &apos ...

Is it possible to refresh the webpage in Angular when the tab is clicked?

Can someone help me find a solution to reload an Angular app's page when the user selects the browser tab? I've been exploring using window.location.reload() for this purpose, but I need guidance on triggering it specifically when the tab is sel ...

Can TypeScript provide a method for verifying infinite levels of nested arrays within a type?

Check out this example The concept behind this is having a type that can either be a single object or an array of objects. type SingleOrArray<T> = T | T[]; The structure in question looks like this: const area: ItemArea = [ { name: 'test1& ...

Ways to update an angular page using the router without resorting to window.location.reload

I have a specific method for resetting values in a component page. The process involves navigating from the "new-edition" page to the "my-editions" component and then returning to the original location at "new-edition". I am currently using this approach ...

Issues with Angular 2 loading properly on Internet Explorer 11

We are currently running an Asp.net MVC 5 web application integrated with Angular 2. The application functions smoothly on Chrome, Firefox, and Edge browsers, but encounters loading issues on IE 11, displaying the error illustrated in the image below: ht ...

Generating React Components Dynamically using TypeScript

Attempting to generate an element in React using Typescript based on the given tagName passed as props, along with additional relative element properties depending on that particular tagName. Take a look at the code snippet below: type ElementProps<Tag ...

Can Angular 2 Material Tabs be dynamically filled with a For Loop subscription?

Is it possible to populate a dynamic number of tabs on an Angular 2 website using a For Loop that subscribes to data from a database service? My dataset is categorized by Classes A, B, and C, each with Sub-Classes 1 and 2. I want to dynamically create thr ...