CODEWITHSUNDEEP
angulartypescript
mukund patel
mukund patel

Reputation: 1052

Parent component value is not changing by its child

datepicker -https://plnkr.co/edit/4mLtl6?p=preview 

 <datepicker [id]="'create-invoice-invoice-date'" [(value)]="duedate"></datepicker>

I have passed "duedate" to datepicker but in my app component ,I did not get change reflection.

Upvotes: 2

Views: 172

Answers (2)

Steve Land
Steve Land

Reputation: 4862

You cant bind an output without writing event handling logic in Angular - this is because "two way binding" is implemented as one way data binding + event binding, because this avoids the substantial performance cost of "real" two way data binding (which was one of the performance issues with AngularJS).

It is, however, very easy to implement using get & set methods. Using your example (note that I've renamed your input parameter from value to invoiceDate), you need to add the following code. Note in particular the methods established for getting and setting invoiceDate - which gives us the ability to emit() the value of our private local var invoiceDateValue to any external watchers.

private invoiceDateValue: string = "";
@Output() invoiceDateChange = new EventEmitter();

@Input()
get invoiceDate() {
  return this.invoiceDateValue;
}

set invoiceDate(val) {
  this.invoiceDateValue = val;
  this.invoiceDateChange.emit(this.invoiceDateValue);
}

Here is the full plunk including the above: https://plnkr.co/edit/WBdmUp?p=preview

Upvotes: 1

kimy82
kimy82

Reputation: 4465

try to add (change)="function(data){...} instead of [(value)]. However you can use input type date.

If you really want your two way databinding, you should have within your datepicker component the: 

 @Input() value: string;

And then the emmitter:

@Output() valueChange = new EventEmitter<string>();

And when the value changes the emit the event.

Upvotes: 1

Related Questions