How to add a Custom Component.

[Prasadangular-devpoint]

[Prasadangular-devpoint]

Previously we are using 5.x.x formio/angular to create the dynamic pages and also we added custom components,

but now we upgraded formio/angular to the latest Version 7.x.x.
but the custom component are not renderering and not loading.

i added the files which are mentioned to be added in my application code(https://github.com/formio/angular/tree/5.5.x/projects/angular-formio/src/custom-component) , but the custom component preview is not shown and getting issue as unknown component. but when we give the static html content it was rendering but not able to load the component .

[Sky-ness]

Hi there , I added the custom component files into my project today and it works for me. You have to copy 3 files into your own project (element.common.ts, register-custom-components.ts and create-custom-components.ts) . After that, you have to manage the different import into these files but for the custom tags you need to import it from the library like this "import {CustomTagsService} from '@formio/angular'" because it's an injectable. After that your component will render again . I hope it helped you =).

[bredar]

We have upgraded to latest ^8.0.0-rc.8 and ^5.0.0-rc.71 and now custom components are not working anymore. They are just rendered as normal textbox components. But when the component isn't registered, and error appears.

edit: Seems that we could fix this with changeing the imports

[omidazmh]

Hi @Sky-ness,

Could you please share a sample project demonstrating how to create custom components using the library version ^8.0.0-rc.8 and Angular 18?

Thank you!

[akshaychavangit]

@omidazmh Yes , I am waiting too . No proper documentation is there for @formio/angular and angular 18 based custom component creation . It will be helpful if you provide @Sky-ness @travist

[ZenMasterJacob20011]

It looks like that code uses the older version of the renderer (4.x)
For 7.x.x we have a 7.0.0 that uses 4.x version of the renderer and
7.5.0 uses the 5.x version of the renderer. Which version are you using?
I suspect that
https://github.com/formio/angular/blob/5.5.x/projects/angular-formio/src/custom-component/register-custom-component.ts#L3
might be a problem as we don't export components in the 5.x render
We have some better custom component documentation the might help here
https://help.form.io/faq/tutorials-and-workflows/custom-component