Use a dom-if to fire a dialog component with custom message, example:
parent element
<paper-icon-button class="delete"
icon="delete" on-tap="deleteFunction">
</paper-icon-button>
deleteFunction(){
childFunction(string parameter);
}
child element
<dom-if if="{{dialogHelper}}">
<template>
<iron-overlay-backdrop opened always-on-top>
<paper-dialog-impl class="dialog">
<h2 style="text-align: center">Title</h2>
<div style="margin: 0 3% 0 3%">Take [[string parameter]]<div>
<div class="paper-dialog-buttons">
<paper-button on-tap="dialogEvent" dialog-dismiss>Cancelar</paper-button>
<paper-button on-tap="dialogEvent" class="red-button" dialog-confirm >
<b>Excluir</b>
</paper-button>
</paper-dialog-impl>
</iron-overlay-backdrop>
</template>
</dom-if>
I want do a component takes a string of the parent's element to do this component useful to all the project. I know that have to put a listener on parent element to listen the child element. But I have no idea how to show the string parameter on my child element.
static get properties() {
dialogHelper: {
type: Boolean,
value: false
}
}
handleDelete(){
this.set('dialogHelper', true);
}
dialogEvent(event){
// Search for the element with dialog-confirm or dialog-dismiss,
// from the root target until this (excluded).
var path = Polymer.dom(event).path;
for (var i = 0, l = path.indexOf(this); i < l; i++) {
var target = path[i];
if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') )) {
this.set('dialogHelper', false);
break;
}else if(target.hasAttribute &&target.hasAttribute('dialog-confirm')) {
this.deleteSchedule();
this.set('dialogHelper', false);
}
}
}