Skip to content

Sample3

Jump to bottom
Mika Berglund edited this page Jul 24, 2024 · 1 revision

Sample: Using the HtmlRender Component

The HtmlRender component is specifically designed to be used in applications that display HTML content that is dynamically generated that potentially contains one or more Mermaid diagram definitions. This dynamic content might come from a database or be generated in other ways.

This sample shows how you can use the HtmlRender component in your application. For simplicity, the content is stored in a variable, and the changing nature is simulated by clicking buttons. The component is available in Blazorade.Mermaid v1.3.0.

@page "/dynamic-content"

@code {
    string? htmlContent = null;
    string htmlSource = @"
<h1>Page title</h1>

<p>
This page is generated on-demand in order to try and reproduce a problem with Blazorade Mermaid.
</p>
<p>
The Mermaid diagram below should be properly rendered.
</p>
<pre class=""mermaid"">
pie title Pets adopted by volunteers
    ""Dogs"" : 386
    ""Cats"" : 85
    ""Rats"" : 15
</pre>
";
}

<h1>Dynamic Content With Mermaid Diagrams</h1>

<button @onclick="this.ClickToRender">Click to render</button>
<button @onclick="this.ClearContent">Clear content</button>

<HtmlRender Selector=".mermaid" HtmlContent="@this.htmlContent" SecurityLevel="SecurityLevel.Loose" />

@code {
    private void ClickToRender()
    {
        this.htmlContent = htmlSource;
    }

    private void ClearContent()
    {
        this.htmlContent = null;
    }
}```

Contents

Clone this wiki locally