{"action":"created","issue":{"url":"https://api.github.com/repos/ionic-team/stencil/issues/108","repository_url":"https://api.github.com/repos/ionic-team/stencil","labels_url":"https://api.github.com/repos/ionic-team/stencil/issues/108/labels{/name}","comments_url":"https://api.github.com/repos/ionic-team/stencil/issues/108/comments","events_url":"https://api.github.com/repos/ionic-team/stencil/issues/108/events","html_url":"https://github.com/ionic-team/stencil/issues/108","id":252825889,"number":108,"title":"Question: How to use changeDetection with dynamic datas into child component","user":{"login":"FazioNico","id":17125807,"avatar_url":"https://avatars3.githubusercontent.com/u/17125807?v=4","gravatar_id":"","url":"https://api.github.com/users/FazioNico","html_url":"https://github.com/FazioNico","followers_url":"https://api.github.com/users/FazioNico/followers","following_url":"https://api.github.com/users/FazioNico/following{/other_user}","gists_url":"https://api.github.com/users/FazioNico/gists{/gist_id}","starred_url":"https://api.github.com/users/FazioNico/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FazioNico/subscriptions","organizations_url":"https://api.github.com/users/FazioNico/orgs","repos_url":"https://api.github.com/users/FazioNico/repos","events_url":"https://api.github.com/users/FazioNico/events{/privacy}","received_events_url":"https://api.github.com/users/FazioNico/received_events","type":"User","site_admin":false},"labels":[{"id":540368915,"url":"https://api.github.com/repos/ionic-team/stencil/labels/question","name":"question","color":"cc317c","default":true}],"state":"closed","locked":false,"assignee":{"login":"jthoms1","id":1425431,"avatar_url":"https://avatars2.githubusercontent.com/u/1425431?v=4","gravatar_id":"","url":"https://api.github.com/users/jthoms1","html_url":"https://github.com/jthoms1","followers_url":"https://api.github.com/users/jthoms1/followers","following_url":"https://api.github.com/users/jthoms1/following{/other_user}","gists_url":"https://api.github.com/users/jthoms1/gists{/gist_id}","starred_url":"https://api.github.com/users/jthoms1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jthoms1/subscriptions","organizations_url":"https://api.github.com/users/jthoms1/orgs","repos_url":"https://api.github.com/users/jthoms1/repos","events_url":"https://api.github.com/users/jthoms1/events{/privacy}","received_events_url":"https://api.github.com/users/jthoms1/received_events","type":"User","site_admin":false},"assignees":[{"login":"jthoms1","id":1425431,"avatar_url":"https://avatars2.githubusercontent.com/u/1425431?v=4","gravatar_id":"","url":"https://api.github.com/users/jthoms1","html_url":"https://github.com/jthoms1","followers_url":"https://api.github.com/users/jthoms1/followers","following_url":"https://api.github.com/users/jthoms1/following{/other_user}","gists_url":"https://api.github.com/users/jthoms1/gists{/gist_id}","starred_url":"https://api.github.com/users/jthoms1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jthoms1/subscriptions","organizations_url":"https://api.github.com/users/jthoms1/orgs","repos_url":"https://api.github.com/users/jthoms1/repos","events_url":"https://api.github.com/users/jthoms1/events{/privacy}","received_events_url":"https://api.github.com/users/jthoms1/received_events","type":"User","site_admin":false}],"milestone":null,"comments":6,"created_at":"2017-08-25T08:01:25Z","updated_at":"2017-10-01T16:58:12Z","closed_at":"2017-09-27T18:25:58Z","author_association":"NONE","body":"Hi!\r\nI was so exited to try the new Stencil compiler. Awsome!! Too fast!!!\r\n\r\nCurrently playing with Stencil and have a bug with the changeDetection into child component :-( \r\nThe data is not updated when the change coming from the parent element. \r\nShemas: \r\n1. parent use child component with datas from array -> \r\n2. childComponent send event emitter to parent on click -> \r\n3. parent create new array of data from original datas array -> \r\n4. parent update item into array by id -> \r\n5. parent update original array by the new one -> \r\nResult: bug: child do not change cause original array is updated BEFORE parent assigne new state...\r\n\r\n```\r\n  handleClick(todoChanged:Todo):void {\r\n    // create new const with each element of this.todos Array (use ES6 is same as .concat())\r\n    const updatedTodos = [...this.todos]\r\n    // update todo by id\r\n    updatedTodos.map((todo:Todo) => {\r\n        (todo._id === todoChanged._id) ? todo.complete = !todo.complete : null\r\n        return todo\r\n    })\r\n    // update this.todos to re-render and update view...\r\n    console.log('Bug: todos list is updated before reassign-> ', this.todos)\r\n    this.todos = updatedTodos // here is the re-assignation ?? waf ??\r\n  }\r\n```\r\n\r\nI've a  sample code in situation just here: [sample code](https://github.com/FazioNico/stencil-supersimple-todos/blob/2a0b141a6461b61e4b098326f4ef8b25b0efff08/src/components/todos-list/todos-list.tsx#L43)\r\n\r\nAny ideas, help is welcom ;-)"},"comment":{"url":"https://api.github.com/repos/ionic-team/stencil/issues/comments/333390551","html_url":"https://github.com/ionic-team/stencil/issues/108#issuecomment-333390551","issue_url":"https://api.github.com/repos/ionic-team/stencil/issues/108","id":333390551,"user":{"login":"kylecordes","id":8799,"avatar_url":"https://avatars3.githubusercontent.com/u/8799?v=4","gravatar_id":"","url":"https://api.github.com/users/kylecordes","html_url":"https://github.com/kylecordes","followers_url":"https://api.github.com/users/kylecordes/followers","following_url":"https://api.github.com/users/kylecordes/following{/other_user}","gists_url":"https://api.github.com/users/kylecordes/gists{/gist_id}","starred_url":"https://api.github.com/users/kylecordes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kylecordes/subscriptions","organizations_url":"https://api.github.com/users/kylecordes/orgs","repos_url":"https://api.github.com/users/kylecordes/repos","events_url":"https://api.github.com/users/kylecordes/events{/privacy}","received_events_url":"https://api.github.com/users/kylecordes/received_events","type":"User","site_admin":false},"created_at":"2017-10-01T16:58:12Z","updated_at":"2017-10-01T16:58:12Z","author_association":"NONE","body":"@FazioNico Handling the data in an immutable matter is indeed somewhat inconvenient. For the solution you show, you have mutated the individual todo item in place - it probably works in the scenario but would break and others. Handling both the item and the list in an immutable way can also be done about as succinctly:\r\n\r\nhttps://github.com/kylecordes/stencil-todomvc/blob/master/src/components/todo-mvc/todo-mvc.tsx#L65\r\n"}}
{"actor":{"display_login":"kylecordes"}}