angular icon indicating copy to clipboard operation
angular copied to clipboard

How to add a Custom Component.

Open Prasadangular-devpoint opened this issue 1 year ago • 6 comments

Prasadangular-devpoint avatar May 07 '24 15:05 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 .

Prasadangular-devpoint avatar May 07 '24 15:05 Prasadangular-devpoint

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 =).

Sky-ness avatar May 23 '24 14:05 Sky-ness

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

bredar avatar Aug 08 '24 09:08 bredar

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!

omidazmh avatar Jan 20 '25 05:01 omidazmh

@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

akshaychavangit avatar Feb 14 '25 06:02 akshaychavangit

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

ZenMasterJacob20011 avatar Mar 13 '25 20:03 ZenMasterJacob20011