CODEWITHSUNDEEP
angularmarkdownangular-dynamic-components
Alfred Sköld
Alfred Sköld

Reputation: 53

How to render childcomponents inside content with ngx-markdown in Angular 14

I've been banging my head against a wall for a while now trying to solve this problem. We have content coming in from an epi-server, the content is in HTML and needs to rendered dynamically in a component.

We are using ngx-markdown to do this quite succesfully when it's only "standard" html elements. But sometimes we get component elements to render, but it seems like ngx-markdown just ignores these elements, I can see them while inspecting the page but they don't really load like components.

This is how it is set up:

dynamic-markdown.component.html

`<markdown [data]="html"></markdown>`

dynamic-markdown.component.ts

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


@Component({
  selector: 'dynamic',
  templateUrl: './dynamic-markdown.component.html'
})
export class DynamicMarkdownComponent implements OnInit {

  
  constructor() { }

    @Input() html: any;

    ngOnInit() {
    }
}

And this is how the dynamic component is loaded inside other components:

<dynamic [html]="mainBody.toString()" ></dynamic>

This is the content we get from the server inside the "mainBody.toString()" that we are trying to display in the dynamic component:

<p><download-file url="/api/document/51ecd42259554e88b93b5dd60de22105/Sortimentskiftesrapport 2017-12-01 (1)" [displaytext]="'Hämta bilagan med ändringsmarkeringar (xlsx)'"></download-file>.</p>

"download-file" is our own component that we are trying to load.

As of now the "p" tags and the "." at the end is all that shows. When inspecting the page I can see that there is an element in between the "p" tags but it doesnt show anything.

I can confirm that the component should display content because if I just hardcode it into the page it shows up fine.

This is in Angular 14, and ngx-markdown@^14.0.1

Does anyone know why this happens or how I can make the markdown component load components succesfully?

I have tried going through all the documentation I could find on: https://jfcere.github.io/ngx-markdown to see if anything was specified there on loading components inside the content. I also have searched everywhere online but can't seem to find anyone else with the same issue.

Upvotes: 2

Views: 732

Answers (1)

joachim-heck
joachim-heck

Reputation: 31

In my case a part of the solution is to disable the sanitizer on the markdown component using [disableSanitizer]="true"

Upvotes: 1

Related Questions