[ANGULAR] RowExpander with createCustomElement renderer

[Robert Hirst]

Hello,

I'm trying to use an Angular component in the renderer for a rowExpander. It seems to almost work, and I see my component, but the @Input() parameters are coming through as undefined.

On reviewing the docs, I can see that it mentions:

"To use an Angular component as column renderer, header renderer or tooltip renderer [...]", which sounds like perhaps this use case isn't a supported example. I notice I can't set htmlEncode on the rowExpander config, so could that be interfering with rendering?

Hoping for a workaround, or If this isn't supported, to find out whether it is something that could be added in the future.

Thanks for your help!

[tasnim]

Hi Robert,

Can you please share the code of the renderer and how you defined the custom element? so we can recreate your issue on our end and debug!

[Robert Hirst]

My row expander config just renders a single component with an ID from extracted from the record. I can see in console logging the ID is present in the renderer and extracted from the record correctly, but the @Input() parameter is coming through undefined inside the component.

My renderer is as follows, and I'm registering the component in app module as per the guide.

  public rowExpanderConfig: Partial<RowExpanderConfig> = {
    columnPosition : 'last',
    renderer({ record }) {
      console.log("Rendering visit card for record", record);
      const { id } = record;
      console.log("Extracted ID", id);
      return `<visit-card-component visitId="${id}"></visit-card-component>`;
    }
  }

But I just noticed today, when looking in the html output on the page, it was coming out with "visitid" in lowercase, which was causing it not to match the input parameter in my component.

Renaming the @Input variable in my component to lower case "visitid" fixed the issue, so I'm happy now, but it would be great to be able to use camel case on the parameters, as this one tripped me up a little!

Thanks for your time,
Robert

[tasnim]

Glad to hear to that you're problem is solved.

I'm not sure what you mean by @Input variable. All html attributes are case-insensitive
https://stackoverflow.com/questions/36176474/camel-case-in-html-tag-attributes-and-jquery-doesnt-work-why

[Robert Hirst]

OK thanks, yes after reading that it seems that if I hyphenate in the renderer output, then It does correctly get passed through to the component, e.g.:

return `<visit-card-component visit-id="${id}"></visit-card-component>`;

I use camelcase everywhere else in my html templates, which, when looking at the output, I can see Angular is converting to that hypenated syntax at render time, so it hadn't occurred to me that I'd have to do something different here.

Thanks for you help, am happy now I can keep the camel case in the typescript component property and still get the parameters passed through from the customer renderer

[tasnim]

Happy to hear that too.

Good Luck