[Custom Components] How can we create custom component ? and How can we get the current instance of the component in Angular 16 ?

[pradeepsonisoni]

[travist]

Custom components can be created as follows.

import { Formio } from '@formio/angular';
import { CustomComponent } from './CustomComponent';

Formio.use({
  components: {
    mycustomComp:  CustomComponent
  }
});

To retrieve the "instance" of the component in Angular 16, you first need to get the "instance" of the renderer which you can get through the following.

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { Formio } from '@formio/angular';

@Component({
  template: `<formio src="https://examples.form.io/example" (ready)='onReady'></formio>`
})
export class FormRenderComponent {
  @ViewChild(FormioComponent) formioComponent: FormioComponent;
  onReady() {
    const yourCustomComp = this.formioComponent.formio.getComponent('yourcomponentkey');
    console.log(yourCustomComp); // this is the instance of your custom component.
  }
}

[pradeepsonisoni]

Thanks for the reply @travist

If we have same custom component twice and we want to show the form fill with the data. Then it is showing same data for all the same type of custom component.

[pradeepsonisoni]

Reference issue If you can check : https://github.com/formio/angular/issues/1023