Есть у меня основной компонент, в котором лежит два компонента:
headerTable, rowTable.
В headerTable у меня именования колонок таблицы и есть чексбокс, который при checked выделяет все строки в rowTable (и наоборот). В rowTable тоже есть checkbox (как раз этот чексбокс и выделятся для выбора строки).
Я хочу сделать следующий сценарий:
- Нажать на выделение всех строк (в headerTable нажать на чексбокс), и убрать из выделения какую-нибудь из строк.
- После того, как уберу чексбокс в какой-нибудь строке, в headerTable чексбокс должен убраться.
Я пытался это сделать посредством декоратора Input, но, видимо, тк разные контексты, то и инпут не срабатывает.
@Component({
selector: 'headerTable',
template: '<input type="checkbox" [ngModel]="allItems" (ngModelChange)=onChange($event)>'
})
export class HeaderComponent {
@Input() allItems: boolean;
onChange(flag: boolean) {
this.allItems = flag;
}
}
...
@Component({
selector: 'row',
template: '<input type="checkbox" (change)="onChange($event)">'
})
export class RowComponent {
@Output() checkedItem = new EventEmitter<number>();
onChange(flag: boolean) {
this.checkedItem.emit(5);
}
}
...
page.html:
<headerTable [allItems]="allItems"></headerTable>
<row (checkedItem)="checkedItem($event)"></row>
page.ts:
checkedItem(id: number) {
this.allItems = false;
}