0

I have a component html template:

<figure class="{{imgClass}}">
    <img src="{{imgUrl}}" class="img-responsive">
    <figcaption>
        {{legende}}
    </figcaption>
</figure>

and a component ts:

import {Component, Input, OnInit} from "@angular/core";

@Component({
    selector: 'picture',
    templateUrl: 'image.component.html',
    styleUrls: ['image.component.sass']
})
export class ImageComponent implements OnInit {

    @Input() name: string;
    @Input() container: string;
    @Input() legende: string;
    @Input() imgClass: string; //left or right for instance
    imgUrl: string;

    constructor() {}

    ngOnInit() {
        this.imgUrl = "http://.../api/containers/" + this.container + "/download/" + this.name;
    }

}

I just removed the API address for security (...), but you sure get the point. The idea is to have a component that loads the image from an API, and adds a caption and class. Calling my component from an html file somewhere else in the application works, with something like:

<picture name="test.jpg" container="test" legende="This is a caption..." imgClass="left"></picture>

Until now, no problem, the component is rendered correctly.

Now, I have some code that is loaded using a Markdown Parser (marked). To avoid Angular 2 sanitization, I used a method described there: Sanitize input in Angular2. Here is a sample:

## This is a title
This is a sample paragraph

<picture name="img_bg_apidae5.png" container="test" legende="Ceci est une légende" imgClass="left"></picture>

This is another paragraph.

Marked translates the code to:

<h2>This is a title</h2>
<p>This is a sample paragraph</p>
<picture name="img_bg_apidae5.png" container="test" legende="Ceci est une légende" imgClass="left"></picture>
<p>This is another paragraph.</p>

The component is not rendered by Angular. BTW, if I create a component without any parameters, it does not work either. Any idea how I could do that?

Community
  • 1
  • 1
Fabien
  • 362
  • 3
  • 9
  • Are you talking about the automatic escape mechanism? – Tatsuyuki Ishi Apr 13 '17 at 11:53
  • Sorry, I don't know this mechanism. I have some markdown code which is translated to html, but my selectors aren't translated by angular2 after being "translated" from markdown (rendered would be a better term). – Fabien Apr 13 '17 at 12:00
  • If your markdown parser is stripping your element, clarify which parser it is and tag with it. If there's literally the element outputted as text, it's the auto escape kicking in. – Tatsuyuki Ishi Apr 13 '17 at 12:02
  • I added some markdown code and the translated html. My problem is two-fold: the parameters are stripped from the code and the component is not rendered. The element is not rendered as text, but as a picture tag, but not rendered by angular... – Fabien Apr 13 '17 at 12:08
  • Make sure you set `sanitize` to false in the options of marked. – Tatsuyuki Ishi Apr 13 '17 at 12:16
  • I tried. In fact, in marked, sanitize is by default set to false. It looks like Angular is sanitizing the code. – Fabien Apr 18 '17 at 08:48
  • @Fabien as far as I know you cannot sanitize angular components, just regular html markup. – unitario Apr 18 '17 at 12:05

0 Answers0