I would like to generate html components (buttons) in my script in js that have svelte tag like on:click :

<button class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        aria-current="page"
        on:click={() => {
            managePages(10);
        }}
    >
        10
</button>

But when I display it with {@html button} it doesn’t matter of the on:click tag…

That’s my code of html generation with svelte tag in js :

for (let i = 1; i <= 3; i++) {
  if (i == $trialsPage) {
    html += `<button
            class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
            aria-current="page"
            on:click="{() => {
                managePages(${i});
            }}"
        >
            ${i}
        </button>`;
  } else {
    html += `<button
            class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
            aria-current="page"
            on:click="{() => {
                managePages(${i});
            }}"
        >
        ${i}
        </button>`;
  }
}

How can I get Svelte to take the tag into account from the string ?

Lokut is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

1 

{#if nbPages > 0 && nbPages <= 5}
    <div class="my-5 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
        <div class="-mt-px flex w-0 flex-1">
            <button
                class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
            >
                <Icon src="{ArrowCircleLeft}" theme="outline" size="50px" class="mr-3 h-5 w-5" />
                Previous
            </button>
        </div>
        <div class="hidden md:-mt-px md:flex">
            {#each Array(nbPages) as row, i}
                {#if i + 1 == $trialsPage}
                    <button
                        class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
                        aria-current="page"
                        on:click="{() => {
                            managePages(i + 1);
                        }}"
                    >
                        {i + 1}
                    </button>
                {:else}
                    <button
                        class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
                        aria-current="page"
                        on:click="{() => {
                            managePages(i + 1);
                        }}"
                    >
                        {i + 1}
                    </button>
                {/if}
            {/each}
        </div>
        <div class="-mt-px flex w-0 flex-1 justify-end">
            <button
                class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
            >
                Next
                <Icon src="{ArrowCircleRight}" theme="outline" size="50px" class="ml-3 h-5 w-5" />
            </button>
        </div>
    </div>
{:else if nbPages > 0 && nbPages > 5}
    <div class="my-5 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
        <div class="-mt-px flex w-0 flex-1">
            <button
                class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
            >
                <Icon src="{ArrowCircleLeft}" theme="outline" size="50px" class="mr-3 h-5 w-5" />
                Previous
            </button>
        </div>
        <div class="hidden md:-mt-px md:flex">
            {#each Array(3) as row, i}
                {#if i + 1 == $trialsPage}
                    <button
                        class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
                        aria-current="page"
                        on:click="{() => {
                            managePages(i + 1);
                        }}"
                    >
                        {i + 1}
                    </button>
                {:else}
                    <button
                        class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
                        aria-current="page"
                        on:click="{() => {
                            managePages(i + 1);
                        }}"
                    >
                        {i + 1}
                    </button>
                {/if}
            {/each}
            <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">...</span>
            <button
                class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
                aria-current="page"
                on:click="{() => {
                    managePages(nbPages - 2);
                }}"
            >
                {nbPages - 2}
            </button>
            <button
                class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
                aria-current="page"
                on:click="{() => {
                    managePages(nbPages - 1);
                }}"
            >
                {nbPages - 1}
            </button>
            <button
                class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
                aria-current="page"
                on:click="{() => {
                    managePages(nbPages);
                }}"
            >
                {nbPages}
            </button>
        </div>
        <div class="-mt-px flex w-0 flex-1 justify-end">
            <button
                class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
            >
                Next
                <Icon src="{ArrowCircleRight}" theme="outline" size="50px" class="ml-3 h-5 w-5" />
            </button>
        </div>
    </div>
{/if}