How to pass changed Array data from Target to Host element in Polymer 2.0?
I have an array in host element which is passed to target element using binding. Now, I would like to change the array data in my target element making sure that the array data in my host element is also updated when I make changes to array in target element.
polymer dataflow
asked Dec 29 '18 at 13:05
Manas BhardwajManas Bhardwaj
134
add a comment |
I have an array in host element which is passed to target element using binding. Now, I would like to change the array data in my target element making sure that the array data in my host element is also updated when I make changes to array in target element.
polymer dataflow
asked Dec 29 '18 at 13:05
Manas BhardwajManas Bhardwaj
134
If still have problem from below, pls add your codes to able to go over it!
– HakanC
Dec 30 '18 at 19:53
add a comment |
I have an array in host element which is passed to target element using binding. Now, I would like to change the array data in my target element making sure that the array data in my host element is also updated when I make changes to array in target element.
polymer dataflow
asked Dec 29 '18 at 13:05
Manas BhardwajManas Bhardwaj
134
I have an array in host element which is passed to target element using binding. Now, I would like to change the array data in my target element making sure that the array data in my host element is also updated when I make changes to array in target element.
polymer dataflow
polymer dataflow
asked Dec 29 '18 at 13:05
Manas BhardwajManas Bhardwaj
134
asked Dec 29 '18 at 13:05
Manas BhardwajManas Bhardwaj
134
asked Dec 29 '18 at 13:05
Manas BhardwajManas Bhardwaj
134
asked Dec 29 '18 at 13:05
Manas BhardwajManas Bhardwaj
134
asked Dec 29 '18 at 13:05
Manas BhardwajManas Bhardwaj
134
134
If still have problem from below, pls add your codes to able to go over it!
– HakanC
Dec 30 '18 at 19:53
add a comment |
If still have problem from below, pls add your codes to able to go over it!
– HakanC
Dec 30 '18 at 19:53
If still have problem from below, pls add your codes to able to go over it!
– HakanC
Dec 30 '18 at 19:53
If still have problem from below, pls add your codes to able to go over it!
– HakanC
Dec 30 '18 at 19:53
add a comment |
1 Answer
1
active
oldest
votes
This are the steps you need to check :
At child element (in your term : target) , you need to declare property with
notify:true
static get properties() {return {
myArray: { type:Array, notify:true }}}
Allow two-way binding at the parent (your word: host) with
curly bracketssomething like:<child-elem my-array="{{myArray}}"></child-elem>At the child element, you need to modify array with some of below in order to observable changes at parent;
this.push(path, item1, [..., itemN])
this.pop(path)
this.unshift(path, item1, [..., itemN])
this.shift(path)
this.splice(path, index, removeCount, [item1, ..., itemN])
answered Dec 30 '18 at 8:16
HakanCHakanC
2,0043713
1
Good answer. A couple of things:static get properties()(properties in plural) andmy-array="{{myArray}}"(quotes around the curly braces). Also, it's a good practice to declare the array's value with a function to ensure that each element gets its own copy of the value:static get properties() {return {myArray: { type: Array, value: () => , notify: true }}}
– vikdoro
Dec 31 '18 at 10:31
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53969793%2fhow-to-pass-changed-array-data-from-target-to-host-element-in-polymer-2-0%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This are the steps you need to check :
At child element (in your term : target) , you need to declare property with
notify:true
static get properties() {return {
myArray: { type:Array, notify:true }}}
Allow two-way binding at the parent (your word: host) with
curly bracketssomething like:<child-elem my-array="{{myArray}}"></child-elem>At the child element, you need to modify array with some of below in order to observable changes at parent;
this.push(path, item1, [..., itemN])
this.pop(path)
this.unshift(path, item1, [..., itemN])
this.shift(path)
this.splice(path, index, removeCount, [item1, ..., itemN])
answered Dec 30 '18 at 8:16
HakanCHakanC
2,0043713
1
Good answer. A couple of things:static get properties()(properties in plural) andmy-array="{{myArray}}"(quotes around the curly braces). Also, it's a good practice to declare the array's value with a function to ensure that each element gets its own copy of the value:static get properties() {return {myArray: { type: Array, value: () => , notify: true }}}
– vikdoro
Dec 31 '18 at 10:31
add a comment |
This are the steps you need to check :
At child element (in your term : target) , you need to declare property with
notify:true
static get properties() {return {
myArray: { type:Array, notify:true }}}
Allow two-way binding at the parent (your word: host) with
curly bracketssomething like:<child-elem my-array="{{myArray}}"></child-elem>At the child element, you need to modify array with some of below in order to observable changes at parent;
this.push(path, item1, [..., itemN])
this.pop(path)
this.unshift(path, item1, [..., itemN])
this.shift(path)
this.splice(path, index, removeCount, [item1, ..., itemN])
answered Dec 30 '18 at 8:16
HakanCHakanC
2,0043713
1
Good answer. A couple of things:static get properties()(properties in plural) andmy-array="{{myArray}}"(quotes around the curly braces). Also, it's a good practice to declare the array's value with a function to ensure that each element gets its own copy of the value:static get properties() {return {myArray: { type: Array, value: () => , notify: true }}}
– vikdoro
Dec 31 '18 at 10:31
add a comment |
This are the steps you need to check :
At child element (in your term : target) , you need to declare property with
notify:true
static get properties() {return {
myArray: { type:Array, notify:true }}}
Allow two-way binding at the parent (your word: host) with
curly bracketssomething like:<child-elem my-array="{{myArray}}"></child-elem>At the child element, you need to modify array with some of below in order to observable changes at parent;
this.push(path, item1, [..., itemN])
this.pop(path)
this.unshift(path, item1, [..., itemN])
this.shift(path)
this.splice(path, index, removeCount, [item1, ..., itemN])
answered Dec 30 '18 at 8:16
HakanCHakanC
2,0043713
This are the steps you need to check :
At child element (in your term : target) , you need to declare property with
notify:true
static get properties() {return {
myArray: { type:Array, notify:true }}}
Allow two-way binding at the parent (your word: host) with
curly bracketssomething like:<child-elem my-array="{{myArray}}"></child-elem>At the child element, you need to modify array with some of below in order to observable changes at parent;
this.push(path, item1, [..., itemN])
this.pop(path)
this.unshift(path, item1, [..., itemN])
this.shift(path)
this.splice(path, index, removeCount, [item1, ..., itemN])
answered Dec 30 '18 at 8:16
HakanCHakanC
2,0043713
edited Dec 31 '18 at 10:43
answered Dec 30 '18 at 8:16
HakanCHakanC
2,0043713
answered Dec 30 '18 at 8:16
HakanCHakanC
2,0043713
answered Dec 30 '18 at 8:16
HakanCHakanC
2,0043713
2,0043713
1
Good answer. A couple of things:static get properties()(properties in plural) andmy-array="{{myArray}}"(quotes around the curly braces). Also, it's a good practice to declare the array's value with a function to ensure that each element gets its own copy of the value:static get properties() {return {myArray: { type: Array, value: () => , notify: true }}}
– vikdoro
Dec 31 '18 at 10:31
add a comment |
1
Good answer. A couple of things:static get properties()(properties in plural) andmy-array="{{myArray}}"(quotes around the curly braces). Also, it's a good practice to declare the array's value with a function to ensure that each element gets its own copy of the value:static get properties() {return {myArray: { type: Array, value: () => , notify: true }}}
– vikdoro
Dec 31 '18 at 10:31
1
1
Good answer. A couple of things:
static get properties() (properties in plural) and my-array="{{myArray}}" (quotes around the curly braces). Also, it's a good practice to declare the array's value with a function to ensure that each element gets its own copy of the value: static get properties() {return {myArray: { type: Array, value: () => , notify: true }}}– vikdoro
Dec 31 '18 at 10:31
Good answer. A couple of things:
static get properties() (properties in plural) and my-array="{{myArray}}" (quotes around the curly braces). Also, it's a good practice to declare the array's value with a function to ensure that each element gets its own copy of the value: static get properties() {return {myArray: { type: Array, value: () => , notify: true }}}– vikdoro
Dec 31 '18 at 10:31
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53969793%2fhow-to-pass-changed-array-data-from-target-to-host-element-in-polymer-2-0%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If still have problem from below, pls add your codes to able to go over it!
– HakanC
Dec 30 '18 at 19:53