i am trying to figure out how to dynamically enable and disable layerlist actions.
say the actions list example from website
enableControls = false;
<button (click)="enableControls = !enableControls">Toggle Control</button>
const layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: defineActions
});
async function defineActions(event) {
if(!enableControls)
return;
const item = event.item;
await item.layer.when();
if (item.title === "US Demographics") {
item.actionsSections = [
[
{
title: "Go to full extent",
icon: "zoom-out-fixed",
id: "full-extent"
},
{
title: "Layer information",
icon: "information",
id: "information"
}
],
[
{
title: "Increase opacity",
icon: "chevron-up",
id: "increase-opacity"
},
{
title: "Decrease opacity",
icon: "chevron-down",
id: "decrease-opacity"
}
]
];
}
}
In this case when user clicks toggle controls, i want to enable/disable the controls in layer list.
However this approach doesn't seem to work as it seems to render the controls once off and moves on.
Is there a way to dynamically toggle controls when enableControl value changes effectively?
