CODEWITHSUNDEEP
angularng2-datepicker
Jed
Jed

Reputation: 1074

Angular 2 Pass values on nested components

So on a simple two components passing data, this should be easy. But on my case I am using a thirdy-party datepicker plugin, then since I have so many date fields on different forms of my app I decided to create a component of my datepicker so that I won't have to repeat the configurations in each view that I use it. The problem now is I am passing a model to the child component which is also being passed to the datepicker component like this:

parent-component.ts

...
template: `<my-custom-datepicker-component [model]="model"></my-custom-datepicker-component>
<span>{{ model }}</span>
`
...
export class ParentComponent{
   model: any;
}

and in my-custom-datepicker.ts

...
template: '<datetime [(ngModel)]="model"></datetime>'
...
export class MyCustomDatepickerComponent{
   @Input() model: any;
}

And here's the datepicker plugin i'm using: https://nkalinov.github.io/ng2-datetime/.

My problem is that the date selected doesn't reflect on the model of the parent component. Hope someone can help me. Thanks in advance!

Upvotes: 0

Views: 822

Answers (2)

sabithpocker
sabithpocker

Reputation: 15566

my-custom-date-picker.component.ts

template: '<datetime [(ngModel)]="model" 
      (ngModelChange)="dateChanged($event)"></datetime>'
...
export class MyCustomDatepickerComponent{
   @Input() date: any;
   @Output() dateChange = new EventEmitter<any>();
   // dateChanged will be called when datetime model changes
   // this will also trigger model
   dateChanged(date: any){
      this.dateChange.emit(date);
   }
}

parent.component.ts

...
template: `<my-custom-datepicker-component 
            [(date)]="programDate"></my-custom-datepicker-component>
<span>{{ programDate }}</span>
`
...
export class ParentComponent{
   programDate: any;
}

OR

...
template: `<my-custom-datepicker-component 
          (dateChange)="customComponentDateChanged($event)" [date]="programDate">
          </my-custom-datepicker-component>
<span>{{ programDate }}</span>
`
...
export class ParentComponent{
   programDate: any;
   customComponentDateChanged(date: any) {
     this.programDate = date;
   }
}

This only explains:

  1. Child to parent communication with EventEmitter.
  2. Two-way binding with Event Emitter

But you are actually trying to create a custom form element when you say a custom date picker. If that is the case then it is a bit more complex as you need to implement validations and ngModel/ngControl/ControlValueAccessor as explained here

That being said, If you want to add some new behaviour to <datetime> you can always extend the original component. Extending it will keep its functionalities intact (you will have to provide new template/css as @Component decorator doesnt get inherited) and you can add your own.

Why are you creating a custom component on top of <datetime>?

Upvotes: 1

balajivaishnav
balajivaishnav

Reputation: 2893

Give a try like this

in my-custom-datepicker.ts

@Input() model: any;

you can access the model using this.model in your component

Upvotes: 0

Related Questions