Passing a Set to a Child Component in Angular

Question

I have the a list of checkboxes which are identified by id: number(Gist for the Data as JSON). If I check the first checkbox then the id value is stored into the Set.

My ParentComponent is as following:

parent.component.ts code snippet

import { Component, OnInit } from '@angular/core';
import * as FilterFunc from 'src/assets/FilterFunction.json';

const Filters: any = FilterFunc;

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  filters = Filters.default;
  selections = new Set();

  constructor() {
  }
  ngOnInit(): void {
  }
  changeCheck(id: number, event: any) {
    (event.target.checked) ?
      this.selections.add(id):
      this.selections.delete(id);

  }
}

parent.component.html code Snippet:

<!--- ....>
<div *ngFor="let label of filter['labels']">
          <div class="form-check">
            <input class="form-check-input"
                   type="checkbox"
                   value="{{label['id']}}"
                   id="{{label['id']}}"
                   [(ngModel)]="label['checked']"
                   (change)="changeCheck(label['id'], $event)"
            >
              <label class="form-check-label" for="{{label['id']}}">
                {{label['name']}}
              </label>
          </div>
      </div>

I wish to pass this selections: Set to a child component and within the Parent's HTML component I added the following:

<child [selected]=selections></child>

within the ChildComponent:

child.component.ts

import { Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  providers: [
    // service that I need
  ]
})
export class ChildComponent implements OnInit {


  @Input()selected: any; // not sure if `Set` is a type for a variable in TS

  constructor(private service: ExploreService) { }

  ngOnInit() {      }

   someFunct() {
      // Use the incoming `selected` here.
   }

}

child.component.html

   {{ selected | json }}

But it provides me only {} in the Browser whenever I check a checkbox and according to changeCheck the selections should have added the values in the Set

If I use {{selected}} it keeps providing me [object Set]. How do I pass the Set from Parent to Child Component?

Upon using OnChange Directive in the child component I do the following:

ngOnChanges(change: SimpleChange) {
console.log(change.currentValue);
}

This provides me the Set() but the selected is still an empty set in the Browser's console.

Answer 1

The only possible way to send to the child was to convert the Set to an array and then to pass it along the Child Component

I had to create a private member as a Set, and had to convert it to the Array

private _selections = new Set();
selections: number[] = [];

within the changeCheck(id: number, event: any) function at the end of checking the event

(event.target.checked) ? this._selection.add(id) : this._selection.delete(id);
this.selections = Array.from(this._selections);

Finally it will work with OnChanges hook when everytime the parent passes the ID value.