I am attempting to build a new component which uses two material design components inside its template. The idea is I will have a new component that upon selecting an item from an md-select will add that item to an md-chip-list, then clear the select and allow you to add additional items to the md-chip-list.
The component should take an optionsList which is an array of objects like:
[{ viewValue: "Eve",value:"E" }, { viewValue: "Bob", value:"B" }, { viewValue: "Alice", value:"A" }]
The component and template look as follows.
import { Component, OnInit, Inject } from '@angular/core';
import { Input } from '@angular/core';
@Component({
selector: 'chip-set-select',
templateUrl: './ChipSetSelect.component.html',
styleUrls: ['./ChipSetSelect.component.scss']
})
export class ChipSetSelectComponent implements OnInit {
@Input() optionList: any[];//TODO can we use generic instead of any? Really we want all these arrays to be of the same type, but we don't know the type in advance.
//optionList: any[];//TODO can we use generic instead of any? Really we want all these arrays to be of the same type, but we don't know the type in advance.
@Input() selectedItems: any[];
selectValue: any;
// Use "constructor"s only for dependency injection
constructor() { }
// Here you want to handle anything with @Input()'s @Output()'s
// Data retrieval / etc - this is when the Component is "ready" and wired up
ngOnInit() {
//this.optionList = ["Susan", "Bob", "Alice"];
//this.optionList = [{ viewValue: "Susan",value:"S" }, { viewValue: "Bob", value:"B" }, { viewValue: "Alice", value:"A" }];
}
}{{optionList}}
<div *ngFor="let option of optionList">value: {{option.value}} viewValue: {{option.viewValue}}</div>
<md-select class="fullWidth" placeholder="Select Funder(s)" [(ngModel)]="selectValue">
<md-option *ngFor="let option of optionList" [value]="option.value">
{{option.viewValue}}
</md-option>
</md-select>
{{selectValue}}
<md-chip-list><md-chip *ngFor="let item of selectedItems">{{item}}</md-chip></md-chip-list>When I then use the component like:
<chip-set-select [optionList]="getOptionList()" [selectedItems]="getSelectedFunders()"></chip-set-select>
things end up hanging before the select list shows as populated. Possible problems with *ngFor or let declaration? No errors appear in the browser console.
Curiously if I remove the optionList attribute and remove the @input in the component and test the same array of objects initialized during ngOnInit of the component the select list gets populated as expected even though its the exact same array of objects.
Likewise if I use an array of strings to pass into [optionList] and modify the other code accordingly...everything works to populate the select options with the string values.
Any idea what is going wrong or why elements which work separately are causing problems when composed to create the final product?
