Is there a way to bind makdown generated HTML to Angular 4 component?

Question

I'm using Angular 4 to build a wiki like app, where the user can register his own pages and link them using a markdown text editor, that is managed by a component/directive. Well, at least I'm trying to achieve that.

Example:

The custom markdown changes the code bellow

<markdown>
  # Pages
  [Page 1]([[other/page1]] "Custom link 1")
  [Page 2]([[other/page2]] "Custom link 2")
  ...
</markdown>

into

<h1>Pages</h1>
<a [routerLink]="['other/page1']" title="Custom Link 1">Page 1</a>
<a [routerLink]="['other/page1']" title="Custom Link 1">Page 1</a>
...

Whenever I try to bind a [routerLink] or any other controller function, pipe or directive to custom elements generated by the angular2-markdown, it turns into plain text and doesn't work at all.

I'm aware that Angular will only bind the html data inside the template during the component compiling cycle, but there's no way to work this out?

Edit:

The markdown changes are built with angular2-markdown.

FussinHussin FussinHussin · Accepted Answer · 2017-10-03T16:06:02

I would recommend using a 3rd party library like angular-2-markdown instead of building this feature yourself. Their are many markdown API's out there, and it's better to use something tried and true at the risk of letting a user having to much access to your application

Is there a way to bind makdown generated HTML to Angular 4 component?

1 Answers