Пробовал вот таким вот образом, но не заработало:
document.querySelector("div[id$='dialog-add']").innerHTML = '<lx-dialog-header><div class="toolbar bgc-primary pl++"><span class="toolbar__label tc-white fs-title">Добавление</span><div class="toolbar__right"><lx-button lx-size="l" lx-color="white" lx-type="icon" lx-dialog-close><i class="mdi mdi-close"></i></lx-button></div></div></lx-dialog-header><lx-dialog-content><div id="listAddElements" class="p++"><lx-text-field lx-label="add new image"><input id="imageNew" name="imageNew" type="text" ng-model="imageNew"></lx-text-field><lx-text-field lx-label="add new dessert"><input id="dessertNew" name="dessertNew" type="text" ng-model="dessertNew"></lx-text-field><lx-text-field lx-label="add new calories"><input id="caloriesNew" name="caloriesNew" type="text" ng-model="caloriesNew"></lx-text-field><lx-text-field lx-label="add new fat"><input id="fatNew" name="fatNew" type="text" ng-model="fatNew"></lx-text-field><lx-text-field lx-label="add new comments"><input id="commentsNew" name="commentsNew" type="text" ng-model="commentsNew"></lx-text-field></div><div class="p++"><lx-button id="button-add" class="bgc-indigo-500" lx-size="xs" lx-type="raised" ng-click="addDialogField()">Добавить</lx-button></div></lx-dialog-content><lx-dialog-footer></lx-dialog-footer>';
т.е. подменяю содержимое всего div компонента "dialog" (LUMX) - новым содержимым. Но такой вариант не заработал, диалоговое окно открывается, поля отображаются/появились, но перестали работать кнопки и эффекты анимации.
Сейчас пробую реализовать на document.createElement, но мне кажется должно быть другое решение в angular