CODEWITHSUNDEEP
angulartypescript
Arun
Arun

Reputation: 3841

Bi-directional angular input parameter and eliminating nulls

My requirement is simple but had to put some thoughts into it. I have to create an empty array even though it is coming as null from parent component. I have an input element that expects an array[] from parent. The parent sometimes sends null instead of empty array that causes the problem. My code is below:

/* child component */
@Input() selectedIds: GenericID[];
<!--Parent HTML-->
<sample-listbox 
  id="dataIds" 
  [(selectedIds)]="dataIds" 
  inputType="number">
</sample-listbox>

I have made some changes in the child component to alter the input data but the new data is not reflecting in the parent component. I used set and get keywords but it acts like unidirectional.
NOTE: I cannot alter the data coming from the parent component.

/* Edited Child component */

 selectedIds: GenericID[];
 @Input('selectedIds')
    set selectedIdss(value: GenericID[]) {
        if (value) {
           this.selectedIds = value;
        }else {
           this.selectedIds = [];
        }
    }
    get selectedIdss() {
        return this.selectedIds;
    }

Upvotes: 0

Views: 131

Answers (1)

bugs
bugs

Reputation: 15313

Bi-directional data flow between parent and child is no longer a thing in Angular 2.

You can use an @Output() property to emit an event from your child component to the parent when something changes and keep them in sync (see the official docs).

Upvotes: 1

Related Questions