Reputation: 41
I am much more familiar with React. My problem seems quite common.
First of all I have a TreeDataStructure class. Within this class, I have a 'filters' property that holds the filters applied to the tree in memory.
The tree is stored in the property of a component A. I transfer the 'filters' property of the tree to a component B, child of A.
This child displays all the filters one by one, and a component C, child of B, displays a single filter and allows it to be modified.
My concern is that I can't get the filter changes from C to the TreeDataStructure class stored in component A.
Here is the gist of my code:
TreeDataStructure.ts
export class DataTreeStructure {
filters: Filters;
}
type Filters = {
items: Array<Filter>
linkOperator: LinkOperator //and or or
}
type Filter = {
column: string
operator: string
comparaisonValue: string
}
Component A
export class ComponentA {
tree: DataTreeStructure
}
Component A Template
<component-b filters[tree.filters]></component-b>
Component B
export class ComponentB {
@Input() filters: Filters;
}
Component B Template
<ng-container *ngFor="let item of filters.items; let index = index;">
<component-c
[column]="filters.items[index].column"
[operator]="filters.items[index].operator"
[comparaisonValue]="filters.items[index].comparaisonValue"
>
</component-c>
</ng-container>
Component C
export class ComponentC {
@Input() column: string;
@Input() operator: string;
@Input() comparaisonValue: string;
}
Component C Template
<input [(ngModel)]="column"/>
<input [(ngModel)]="operator"/>
<input [(ngModel)]="comparaisonValue"/>
How would you do it?
Upvotes: 2
Views: 73