Below is the display from my project's output window
In the image, you can see checkboxes on the left and cards on the right. I want that when a checkbox is checked, only the corresponding data should be shown while the rest remains hidden. For example, checking the box for RICE should display only RICE-related information.
Here is the code:
1.crop.model.ts
export class Crop {
name: string;
district: string
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
}
export class CropFilter {
name: string
checked: boolean
}
export class DistrictFilter {
name: string
checked: boolean
}
2. CropFilter.ts
import { CropFilter } from "./crop.model";
export const CROPSFILTER: CropFilter[] = [
{
name: "Rice",
checked: false
}, {
name: "Wheat",
checked: false
}, {
name: "Barley",
checked: false
}
]
3. crop.data.ts
import { Crop } from "./crop.model";
export const CROPS: Crop[] = [
...
];
4. crop.service.ts
import { Injectable } from "@angular/core";
...
5. all-trade.component.ts
import { Component, OnInit } from '@angular/core';
...
6. all-trade.component.html
<div>
...
</div>