Hello,
I try to use the vaadin-notification in a litelement with a “dynamic” message to display.
I ve tried 2 approachs but i am unable to reach the good result.
First approach is templating : The result is always “hello”
static get properties() {
return {
notificatorMessage : { type : String }
};
}
constructor() {
super();
this.notificatorMessage = "hello";
}
render() {
return html `
<style>
vaadin-grid vaadin-button {
margin-left: 5px;
}
</style>
<div style="margin-bottom: 10px; margin-top: 10px; margin-left: 5px">
<vaadin-button theme="primary" id="add-btn" @click="${e => this._onAdd()}">Add</vaadin-button>
<vaadin-notification duration="4000" position="middle">
<template>
<div>
<b style="color:red">Notice</b>
<br>
${this.notificatorMessage}
</div>
</template>
</vaadin-notification>
</div>
`;
}
_onAdd() {
this.notificatorMessage = "Coucou";
this._notificator.open();
}
Second approach is rendering : first click = “hello” but second click is “coucou” (better but not good)
render() {
return html `
<style>
vaadin-grid vaadin-button {
margin-left: 5px;
}
</style>
<div style="margin-bottom: 10px; margin-top: 10px; margin-left: 5px">
<vaadin-button theme="primary" id="add-btn" @click="${e => this._onAdd()}">Add</vaadin-button>
<vaadin-notification duration="4000" position="middle" notif-message="${this.notificatorMessage}" .renderer=${this.notificatorRenderer}></vaadin-notification>
</div>
`;
}
notificatorRenderer(root, column) {
render(html`
<div>
<b>Notice</b>
<br>
${column.getAttribute("notif-message")}
</div>
`,root);
}
_onAdd() {
this.notificatorMessage = "Coucou";
this._notificator.open();
}
Any idea ? Thanks in advance