1

I have followed the tutorial in this blog successfully and was wondering if I can extend it further by enabling inline editing of Crafter CMS in an Angular 2 project. My first attempt was to include this code <@studio.iceAttr iceGroup="author"/> in a template of angular component as follows:

<h1 <@studio.iceAttr iceGroup="author"/>>${title}</h1>

but the angular compiler insists that it is an invalid HTML. I understand that under the hood Crafter studio will convert the above code to an actual HTML. Thus, I think that I should instead add the produced html in the template of the angular component but it seems there is are generated value as well. Are there any other ways to enable inline editing for angular 2 apps inside Crafter CMS?

Katie Hurley
  • 179
  • 9
ayago
  • 21
  • 4

1 Answers1

0

First, <@studio.iceAttr iceGroup="author"/> is server-side tag. Angular definitely won't recognize it. I think you need move that into a simple API which can return the inline CSS content. Then use ngStyle to bind it in your Angular template.

My code assumption, in your code component.ts:

cmsInlineCss: any;

ngOnInit(private http: Http) {
    this.http.get('api/cmsinlinecss/{para}').map(res => {
        var css = res.json();
        var processedCss = '';

        // process css to JSON object string

        this.cmsInlineCss = processedCss;
    });
}

In your template:

<h1 [ngStyle]="cmsInlineCss">${title}</h1>
wannadream
  • 1,669
  • 1
  • 12
  • 14
  • Problem here is that I don't know the phase wherein the server tag is converted to the equivalent html tag. It is not just an inline css that I need to inject into the component's html but also the generated htmls – ayago May 01 '17 at 08:18
  • Then you can just create a page contains the server tag you need. It will return HTML and use Angular http to consume it as string, then parse it to JSON object string. – wannadream May 01 '17 at 08:27