{"action":"created","issue":{"url":"https://api.github.com/repos/InfomediaLtd/angular2-materialize/issues/231","repository_url":"https://api.github.com/repos/InfomediaLtd/angular2-materialize","labels_url":"https://api.github.com/repos/InfomediaLtd/angular2-materialize/issues/231/labels{/name}","comments_url":"https://api.github.com/repos/InfomediaLtd/angular2-materialize/issues/231/comments","events_url":"https://api.github.com/repos/InfomediaLtd/angular2-materialize/issues/231/events","html_url":"https://github.com/InfomediaLtd/angular2-materialize/issues/231","id":207446536,"number":231,"title":"Multiple Select Issue when initialized with selected options","user":{"login":"outerbound","id":1991801,"avatar_url":"https://avatars0.githubusercontent.com/u/1991801?v=3","gravatar_id":"","url":"https://api.github.com/users/outerbound","html_url":"https://github.com/outerbound","followers_url":"https://api.github.com/users/outerbound/followers","following_url":"https://api.github.com/users/outerbound/following{/other_user}","gists_url":"https://api.github.com/users/outerbound/gists{/gist_id}","starred_url":"https://api.github.com/users/outerbound/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/outerbound/subscriptions","organizations_url":"https://api.github.com/users/outerbound/orgs","repos_url":"https://api.github.com/users/outerbound/repos","events_url":"https://api.github.com/users/outerbound/events{/privacy}","received_events_url":"https://api.github.com/users/outerbound/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-02-14T08:19:14Z","updated_at":"2017-06-04T16:59:15Z","closed_at":"2017-03-07T10:26:13Z","body":"I am using multiple select with already initialized options . It does not show these initial options pre-selected in options dropdown.\r\nI am able to get correct updates on ngmodel binding to  selected options if I change my selection in options dropdown.\r\nI am passing option object inside [value] rather than option.id\r\n\r\nCode - \r\n```\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\nexport class Option {\r\n    constructor(public id: number, public name: string) { }\r\n}\r\n\r\n@Component({\r\n  selector: 'app-test',\r\n  template: `\r\n    <h5>{{title}}</h5>\r\n    <div class=\"row\">\r\n      <form materialize class=\"col s12\" [formGroup]=\"form\">\r\n        <div class=\"row\">\r\n          <div class=\"input-field col s6\">\r\n            <select \r\n              multiple \r\n              materialize=\"material_select\" \r\n              [materializeSelectOptions]=\"allOptions\"\r\n              [(ngModel)]=\"selectedOptions\"\r\n              (ngModelChange)=\"onNgModelChange($event)\"\r\n              formControlName=\"optionsControl\"\r\n              >\r\n              <option value=\"\" disabled selected>Choose your option</option>\r\n              <option *ngFor=\"let option of allOptions\" [value]=\"option\">{{option.name}}</option>\r\n            </select>\r\n            <label>Multi Select</label>\r\n          </div>    \r\n        </div>\r\n        <div class=\"row\">\r\n          <div class=\"col s12\">\r\n            Selected : <span style=\"word-wrap:break-word;\" *ngFor=\"let a of selectedOptions\">({{a.id}}, {{a.name}}) | </span>\r\n          </div>\r\n        </div>        \r\n      </form>\r\n    </div>\r\n  `\r\n})\r\nexport class TestComponent implements OnInit {\r\n\r\n  form: FormGroup;\r\n  title: string = 'Test Form';\r\n\r\n  //all options list\r\n  allOptions: Option[] = [];\r\n\r\n  //selectedIndexes: number[] = [];\r\n  selectedOptions: Option[] = [];\r\n  constructor(\r\n    formBuilder: FormBuilder,\r\n  ) {\r\n    this.form = formBuilder.group({\r\n      optionsControl: ['']      \r\n    });\r\n  }\r\n\r\n  ngOnInit() {\r\n    window.setTimeout(()=>{\r\n        this.allOptions = [\r\n            {id:1,name:'Option 1'},\r\n            {id:2,name:'Option 2'},\r\n            {id:3,name:'Option 3'},\r\n            {id:4,name:'Option 4'},\r\n            {id:5,name:'Option 5'}\r\n        ];\r\n        //1, 3, 5 should already be selected\r\n        this.selectedOptions = [\r\n            {id:1,name:'Option 1'},\r\n            {id:3,name:'Option 3'},\r\n            {id:5,name:'Option 5'},\r\n        ];\r\n         //3rd is already selected\r\n        //this.selectedIndexes = [0, 2, 4];       \r\n    },100);      \r\n  }\r\n\r\n  onNgModelChange($event){\r\n    console.log('onNgModelChange $event', $event);\r\n  }\r\n\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/InfomediaLtd/angular2-materialize/issues/comments/306052499","html_url":"https://github.com/InfomediaLtd/angular2-materialize/issues/231#issuecomment-306052499","issue_url":"https://api.github.com/repos/InfomediaLtd/angular2-materialize/issues/231","id":306052499,"user":{"login":"rodrigorrl","id":28394521,"avatar_url":"https://avatars3.githubusercontent.com/u/28394521?v=3","gravatar_id":"","url":"https://api.github.com/users/rodrigorrl","html_url":"https://github.com/rodrigorrl","followers_url":"https://api.github.com/users/rodrigorrl/followers","following_url":"https://api.github.com/users/rodrigorrl/following{/other_user}","gists_url":"https://api.github.com/users/rodrigorrl/gists{/gist_id}","starred_url":"https://api.github.com/users/rodrigorrl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rodrigorrl/subscriptions","organizations_url":"https://api.github.com/users/rodrigorrl/orgs","repos_url":"https://api.github.com/users/rodrigorrl/repos","events_url":"https://api.github.com/users/rodrigorrl/events{/privacy}","received_events_url":"https://api.github.com/users/rodrigorrl/received_events","type":"User","site_admin":false},"created_at":"2017-06-04T16:59:15Z","updated_at":"2017-06-04T16:59:15Z","body":"@outerbound I have the same problem, could You help me with an example?\r\nI tried creating the eventemitter, but the control did not change.\r\nThank you!\r\n\r\n```\r\n<select materialize=\"material_select\" [materializeSelectOptions]=\"perfis\" \r\n                id=\"chlPerfil\" multiple [(ngModel)]=\"perfisSelecionados\"\r\n                    name=\"chlPerfil\" class=\"form-control\" >\r\n                    <option value=\"\" disabled selected>Selecione o perfil</option>\r\n                    <option *ngFor=\"let option of perfis\" [ngValue]=\"option\" >{{ option.nome }}</option>\r\n</select>\r\n```\r\n\r\n```\r\nloadUsuarioPerfil(formulario, chlPerfil) {\r\n        this.usuarios_perfis = [];\r\n        this.perfisSelecionados = [];\r\n        var usuario_perfilFilter: Usuario_Perfil = new Usuario_Perfil();\r\n        usuario_perfilFilter.idUsuario = this.currentUsuario.idUsuario;\r\n        setTimeout(() => {\r\n            this.usuario_perfilService.list(usuario_perfilFilter)\r\n                .subscribe((res) => {\r\n                    if (res.success) {                        \r\n                        this.usuarios_perfis = res.result;                        \r\n                        //checked apenas nos perfis dos usuário selecionado\r\n                        for (var i in res.result) {                            \r\n                            this.perfisSelecionados.push(res.result[i].perfil);                            \r\n                        }\r\n                        console.log(this.perfisSelecionados);                      \r\n                    } else {\r\n                        console.error(res.errors);\r\n                    }                    \r\n                });\r\n        }, 100);\r\n        this.perfisSelecionadosEmit = new EventEmitter<any>();        \r\n        formulario.form.controls.chlPerfil.setValue(this.perfisSelecionados);        \r\n        this.perfisSelecionadosEmit.emit({ action: 'material_select', params: ['update'] });                \r\n    }\r\n```\r\n"}}
{"actor":{"display_login":"rodrigorrl"}}