2

I'm trying to render a structure inside a RichTextField in kentico cloud. Following this tutorial https://docs.kenticocloud.com/tutorials/develop-apps/get-content/dealing-with-structure-in-rich-text i made a ContentType and used as template for my AngularLink (which has 2 properties, text and link), then defined a TypeResolver and registered in DeliveryClient

new DeliveryClient({
      projectId: 'xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',

      typeResolvers: [
        new TypeResolver('landing_page', () => new LandingPage()),
        new TypeResolver('angular_link', () => new AngularLink())
      ],
    });

the AngularLink class provides a richTextResolver

export class AngularLink extends ContentItem {
  text: Fields.TextField;
  link: Fields.TextField;
  constructor() {
    super({

      richTextResolver: (item: AngularLink) => {
        return `<a routerLink="${item.link.value}">${item.text.value}</a>`;
      }
    });
  }
}

The problem is that when i resolve the html with the getHtml() method in RichTextField, the BrowserRichTextParser inserts the returned string in an element through innerHTML and the final result is the anchor tag with an attribute routerlink all lowercase.

Is there a better strategy to make angular attributes working inside the standard fow of kentico-cloud-delivery api?

Thank you very much in advance!

rocky
  • 7,506
  • 3
  • 33
  • 48
G-Host
  • 356
  • 2
  • 11

1 Answers1

0

This is a good question, however it's not easy to solve. Essentially, the problem you are facing is that what you get from getHtml method is 'just' a string and when you render it via innerHtml angular treats its as html, but it can't resolve directives/components in your html.

It might be possible in a future that Angular's innerHtml directive will try to instantiate and resolve directives/components, but that is not the case currently. Given the complexity of components, lifecycle and DI, I don't think this will get implemented in near future. It may be that the new Ivy renderer will make path for this to be possible at some point.

To achieve what you are asking you would need to instruct angular to create components/directives dynamically - Angular has support for this.

Some resources that might be useful for you are:

Enn
  • 2,137
  • 15
  • 24
  • Thank you @Enn, but from the angular side there's no problem, already implemented dynamic html (string) inclusion using a dynamic component and compiling the template on the fly. The problem is that Kentico itself resolve the `ContentItem richTextFields` and its childrens calling somewhere `richTextResolver` and putting the result inside an htmlelement with *innerHTML*, which wrongly create the attribute routerlink in the parsed element all in lowercase. This is a limitation of the function `innerHTML` because in html attributes should be case-insensitive, but not in Angular unfortunately – G-Host Aug 01 '19 at 10:39
  • I'm not quite sure what you mean, the output of `richTextResolver` is always a string which just happens to be an html. You get this string by calling `getHtml` (or `resolveHtml` depending on version) on particular `RichTextField` (or `RichTextElement` again depending on version). Can you show example of what the output of your `richTextResolver` is and what it should be? – Enn Aug 01 '19 at 12:02