How to add button with click event on popupTemplate in ACGIS JavaScript

I meet a problem when trying to add button on popupTemplate in ARCGIS JavaScript;My environment is node.js, and the version of ARCGIS JavaScript is 4.28. The code snippet is as following:

const popupTemplate = {
    title: "{Name}",
    content: "{Description}"
}

var graphicID = "testing_1";
const buttonHTML = `<button class="btn btn-danger" onclick="DeleteSelectedDiagram('${graphicID}')">Delete the Diagram</button>`;

graphic = new Graphic({
    geometry: new geometry.Polygon({
        rings: coordinates,
        spatialReference: {
            wkid: 3826
        },
        id:"testing_1"
    }),
    symbol: {
        type: "simple-fill",
        color: [255, 0, 0, 0.3], // Red color with 0.3 opacity
        outline: {
            color: [255, 0, 0], // Red color
            width: 1
        }
    },
    attributes: {
        Name: "Diagram Infos",
        Description: buttonHTML
    },
    popupTemplate: popupTemplate
});

However, it is not working,the css style of button is disappear and popupTemplate only show the words "Delete the Diagram". Is there any method to add button with click event to popupTemplate? any instruction is highly appreciated, thanks a lot.

Solution

There are several types of popup contents (ArcGIS JS API - PopupTemplate content). Though I think you could achieve your goal with expression type content (the direction I think you were trying to go), in this case I would say is more simple with function type.

There is another way to add functionality in the popup witch I think is probably more appropriated for this cases, witch are actions (ArcGIS JS API - PopupTemplate actions).

Here is a simple example for using both choices,

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>PopupTemplate - content function and action</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.28/"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        let populationChange;
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/Layer",
            "esri/core/reactiveUtils"
        ], (Map, MapView, Layer, reactiveUtils) => {
            const map = new Map({
                basemap: "dark-gray-vector"
            });

            // Create the MapView
            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 6,
                center: [-87, 34]
            });

            Layer.fromPortalItem({
                portalItem: { id: "e8f85b4982a24210b9c8aa20ba4e1bf7" }
            }).then((layer) => {
                map.add(layer);
                let source = null;
                const message = () => console.log(source, view.popup.selectedFeature);
                const contentFunction = (feature) => {
                    const div = document.createElement("div");
                    source = "FUNCTION";
                    const button = document.createElement("button");
                    button.innerText = "Message in console";
                    button.addEventListener("click", message);
                    div.append(button);
                    return div;
                };
                const actionMessage = {
                    title: "Message in console",
                    id: "message-action",
                    image: null
                };
                const popupTemplate = {
                    title: "Population in {NAME}",
                    outFields: ["*"],
                    content: contentFunction,
                    actions: [actionMessage]
                };
                layer.popupTemplate = popupTemplate;

                reactiveUtils.on(
                    () => view.popup,
                    "trigger-action",
                    (event) => {
                        if (event.action.id === "message-action") {
                            source = "ACTION";
                            message();
                        }
                    }
                );
            });
        });
    </script>

</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>