Currently, I am facing an issue with a component that displays a list of 'items' which are components created using a selector. I have a checkbox that I want to update the 'state' of all child components when clicked.
Struggling to find the right solution for this problem. For more information, please refer to Plunkr.
//our root app component
import {Component, EventEmitter} from 'angular2/core'
class Item {
name: boolean;
constructor(name: string) {
this.name = name;
}
}
@Component({
selector: 'my-item',
template: `
<div>
<label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
</div>
`
})
export class MyItemComponent {
state: boolean = false;
}
@Component({
selector: 'my-app',
template: `
<div style="border: 1px solid red;">
<label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
</div>
<div *ngFor="#item of items">
<my-item></my-item>
</div>
`,
directives: [MyItemComponent]
})
export class App {
state: boolean = true;
items: Item[] = [];
constructor() {
this.items.push(new Item("hello"));
this.items.push(new Item("test"));
}
}