How can i create a Custom NestedComponent with Angular Components

[Schwofel]

trafficstars

I don't want to use the CheckMatrix.js example. Is there a way that i can use a @Component and create a nested component with children and multiple drop zones?

[travist]

Custom components are actually just regular components included within your own application. There are many examples of nested components found @ the following locations.

• https://github.com/formio/formio.js/blob/master/src/components/columns/Columns.js
• https://github.com/formio/formio.js/blob/master/src/components/container/Container.js
• https://github.com/formio/formio.js/blob/master/src/components/datagrid/DataGrid.js
• https://github.com/formio/formio.js/blob/master/src/components/datamap/DataMap.js

and there are many more.

[dsovago]

@travist The question is about creating custom component with Angular component, not JS file component, like at this link: https://github.com/formio/angular/wiki/Custom-Components-with-Angular-Elements I'm interested in this question too, because I want to create an Angular component inherited from NestedComponent, but this way doesn't work for me, it says "Module not found: Error: Can't resolve 'formiojs/types/components/_classes/nested/nestedComponent'", but this module is accessible on this path. And an other question is what params I need to pass in super() constructor and where do I get them from?

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormioCustomComponent, FormioEvent } from '@formio/angular';
import { NestedComponent } from 'formiojs/types/components/_classes/nested/nestedComponent';

@Component({
  selector: 'app-spot-table',
  templateUrl: './spot-table.component.html',
  styleUrls: ['./spot-table.component.sass']
})
export class SpotTableComponent extends NestedComponent implements FormioCustomComponent<any>, OnInit {

  @Input() value: any;
  @Output() valueChange: EventEmitter<any>;
  @Input() disabled: boolean;

  constructor() {
    super(???);
  }

  ngOnInit(): void {
  }
}

[davidyoung77]

@dsovago did you have any success implementing the custom NestedComponent with multiple drop zones in Angular