Angular Typescript - Multi filter with check boxes

Question

I'm working on a Stackblitz and have unfortunately hit a wall and are now just going round in circles!

I'm looking to filter an array based on multiple check boxes values that need to be included in a specific object in order for it to be left in the DOM.

Here is the Stackblitz - https://stackblitz.com/edit/angular-ycebgh

This is my array json:

cards = [
    {
      name: "Daniel",
      profile: [
        {
          type: "Gender",
          name: "Male"
        },
        {
          type: "Fashion",
          name: "Footwear"
        }
      ]
    },
    {
      name: "John",
      profile: [
        {
          type: "Gender",
          name: "Male"
        },
        {
          type: "Family",
          name: "Children"
        }
      ]
    },
    {
      name: "Sarah",
      profile: [
        {
          type: "Gender",
          name: "Female"
        }
      ]
    },
    {
      name: "Janice",
      profile: [
        {
          type: "Gender",
          name: "Female"
        },
        {
          type: "Family",
          name: "Children"
        }
      ]
    }
  ]

I'm currently emitting the checkbox click event into the parent and i need the parent to then filter the objects depending on the checkbox values selected.

I've managed to do it with one at time but having multiple is proving to be a struggle.

Something like:

onFilter(options) {
    console.log(options);
    this.cards.filter(x => x.profile == options.value );
  }

Any insight into what I need to do to accomplish this would be great.

Answer 1

You had some troubles with the way you manage your data.

See this working stackblitz