JamesStandbridge
JamesStandbridge

Reputation: 41

Update an object array via ngmodel from a child component Angular

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

Answers (0)

Related Questions