Using Angular 2 components in parsed markdown code

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?