Angular2 checkboxes for filtering data

Question

Angular2 checkboxes for filtering data

I'm working with an Angular2 grid that showcases an array of Fabrics, each with its own color or fabric type properties. Right now, all Fabrics are displayed in the grid, but I need to implement a series of checkboxes for color and fabric type, along with the corresponding quantity next to each checkbox. The filtered Fabrics should only display after clicking on an "apply filter" button, and selecting one checkbox should dynamically update the counts of the other checkboxes.

For example:

https://i.sstatic.net/tcs25.png

I would appreciate any guidance on how to approach this. I already have all the necessary data. Should I create a pipe, a filtering service, or a form?

** MODELS **

A ProductConfigurationOption serves as the parent option for choice options, such as Fabric being a ConfigurationOption.

A configuration-option-choice represents a specific fabric like Tan Chenille. Each individual ConfigurationOptionChoice comes with various OptionChoiceProperties.

product-configuration-option.ts

import { ProductConfigurationOptionChoice } from './product-configuration-option-choice';
import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
import { IProductConfigurationOptionChoice } from '../ Interfaces/iproduct-configuration-option-choice';
import { IProductConfigurationOption } from '../Interfaces/iproduct-configuration-option';

export class ProductConfigurationOption implements IProductConfigurationOption {
   constructor(
        public ConfiguratorID: number,
        public OptionID: number,
        public OptionName: string,
        public OptionDescription: string,
        public OptionSortOrder: number,
        public SKUPartOrdinal: number,
        public ProductConfigurationOptionChoice: IProductConfigurationOptionChoice[],
        public OptionChoicesProperties: IProductConfiguratorOptionChoiceProperties[]
    ) {

    }
}

product-configuration-option-choice.ts


import { ProductConfiguratorOptionChoiceProperties } from '../Models/product-configurator-option-choice-properties';
import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
import { IProductConfigurationOptionChoice } from '../Interfaces/iproduct-configuration-option-choice';
export class ProductConfigurationOptionChoice implements IProductConfigurationOptionChoice {
public OptionChoiceID: number;
public OptionID: number;
public OptionValue: string;
public OptionChoiceName: string;
public OptionChoiceDescription: string;
public SKUPart: string;
public ImageURL: string;

public SortOrder: number;
public PriceOffset: number;
public OptionChoiceProperties: IProductConfiguratorOptionChoiceProperties[];
constructor( ){

}

setOptionChoiceProperties(optionProperties: ProductConfiguratorOptionChoiceProperties[]) {
this.OptionChoiceProperties = optionProperties;
}
}

product-configurator-option-choice-properties.ts


import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
export class ProductConfiguratorOptionChoiceProperties implements IProductConfiguratorOptionChoiceProperties {
constructor(
public OptionChoiceId: number,
public PropertyId: number,
public Name: string,
public Value: string
) {

}
}

Currently, my approach involves extracting OptionChoiceProperties, converting them into checkboxes representing their quantities, and exploring ways to dynamically adjust these quantities when filters are applied.

angular typescript angular2-forms angular2-pipe

Answer 1

Answer №1

If you want to narrow down your array of items, consider utilizing a pipe for filtering

filtering items using pipe

@Pipe({name: 'fabricType'})
export class FabricTypePipe implements PipeTransform {
  transform(fabrics: any[], fabricTypes: string[]): any[] {
    if (!fabricTypes || fabricTypes.length === 0) return fabrics;
    return fabrics.filter(fabric => fabricTypes.includes(fabric.type));
  }
}

how to implement in template

<div *ngFor="let colour of fabricColours">
  <input type="checkbox" [(ngModel)]="colour.selected" />{{fabrics | fabricType: types | countColour: colour.name}} {{colour.name}}
</div>

<div *ngFor="let fabric of fabrics | fabricType: types">{{fabric.name}}</div>

You can set types as constant like['weave','phur'], dynamic (array), or a function that returns an array.

To calculate the total number of items, a separate pipe can be utilized

counting items with pipe

@Pipe({name: 'countColour'})
export class CountColourPipe implements PipeTransform {
  transform(fabrics: any[], colour: string): number {
    if (!fabrics || fabrics.length === 0) return 0;
    return fabrics.reduce((count, fabric) => fabric.colour === colour ? count + 1 : count, 0);
  }
}

See how the counts change in this animated image

https://i.sstatic.net/JJKpM.gif

Check out a live plunker example

Answer 2

If you want to narrow down your array of items, consider utilizing a pipe for filtering

filtering items using pipe

@Pipe({name: 'fabricType'})
export class FabricTypePipe implements PipeTransform {
  transform(fabrics: any[], fabricTypes: string[]): any[] {
    if (!fabricTypes || fabricTypes.length === 0) return fabrics;
    return fabrics.filter(fabric => fabricTypes.includes(fabric.type));
  }
}

how to implement in template

<div *ngFor="let colour of fabricColours">
  <input type="checkbox" [(ngModel)]="colour.selected" />{{fabrics | fabricType: types | countColour: colour.name}} {{colour.name}}
</div>

<div *ngFor="let fabric of fabrics | fabricType: types">{{fabric.name}}</div>

You can set types as constant like['weave','phur'], dynamic (array), or a function that returns an array.

To calculate the total number of items, a separate pipe can be utilized

counting items with pipe

@Pipe({name: 'countColour'})
export class CountColourPipe implements PipeTransform {
  transform(fabrics: any[], colour: string): number {
    if (!fabrics || fabrics.length === 0) return 0;
    return fabrics.reduce((count, fabric) => fabric.colour === colour ? count + 1 : count, 0);
  }
}

See how the counts change in this animated image

https://i.sstatic.net/JJKpM.gif

Check out a live plunker example

Answer 3

Answer №2

If you want to achieve this, consider using component methods. While a pipe could also work, here's an instance demonstrating how to make it work with component methods.

Execute the code below on your fabric sub-array (such as color, type, etc.) to obtain a count and a list of distinct items.

var obj = { };
for (var i = 0, j = this.fabrics[0].colors.length; i < j; i++) {
   obj[this.fabrics[0].colors[i]] = (obj[this.fabrics[0].colors[i]] || 0) + 1;
}

When run on your sub-array (e.g., fabrics[0].colors), the resulting 'obj' will appear as follows:

{
  black: 5,
  orange: 2,
  green: 8
}

You can iterate this in a for loop on your fabrics too; the core concept remains unchanged. Once the object is prepared, converting it into an array will be essential for utilizing ngFor (as well as ngModel if desired).

To see an example of iterating ngFor on an object, you can refer to this plunker.

Answer 4

If you want to achieve this, consider using component methods. While a pipe could also work, here's an instance demonstrating how to make it work with component methods.

Execute the code below on your fabric sub-array (such as color, type, etc.) to obtain a count and a list of distinct items.

var obj = { };
for (var i = 0, j = this.fabrics[0].colors.length; i < j; i++) {
   obj[this.fabrics[0].colors[i]] = (obj[this.fabrics[0].colors[i]] || 0) + 1;
}

When run on your sub-array (e.g., fabrics[0].colors), the resulting 'obj' will appear as follows:

{
  black: 5,
  orange: 2,
  green: 8
}

You can iterate this in a for loop on your fabrics too; the core concept remains unchanged. Once the object is prepared, converting it into an array will be essential for utilizing ngFor (as well as ngModel if desired).

To see an example of iterating ngFor on an object, you can refer to this plunker.

Angular2 checkboxes for filtering data

Answer №1

Answer №2

Similar questions

CSS Styles not being applied globally in Angular

Exploring the Possibilities of Nipplejs Integration in Vue with Quasar

Understanding the concept of mutable properties in Typescript

Should I link my Angular Material 2 data table to AngularFire2 or Firebase service?

Using injected services within static methods may seem tricky at first, but once you

Getting a TypeError following the execution of 'npm update' and 'ng build -prod' commands

Typescript compilation fails to include require statements in certain files

Adjust the height of a div vertically in Angular 2+

Adding local images to Excel can be easily accomplished using Office Scripts

Utilizing TS2722 alongside restrictive parameters in tsconfig

Instructions on opening a modal and changing the source of the iframe within the modal

Angular project is showing a unique error that says '$localize' is undefined according to Eslint

Steps to activate a function within an angular6 form-related directive

What is the process for including the 'Access-Control-Allow-Origin' header in all responses?

Do I really need to install @angular/router as a dependency in Angular CLI even if I don't plan on using it?

Exploring the Ways to Determine Array Type in Typescript Generics

Sample test scenario for a service function that includes an HTTP subscription using Angular's HTTP RxJS

Creating and Injecting Singleton in Angular 2

Guide to locating a particular node within an array of nested objects by utilizing the object

The ActivatedRoute.routeConfig object appears to be empty in an Angular 2 project built with Angular-cli