Angular 2 Pass values on nested components

Question

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!

Did you read the guide explaining the different possibilities? [Component Interaction Guide](https://angular.io/guide/component-interaction) — sabithpocker, Jun 15 '17 at 05:46
Yes I already did. I think this scenario is more complex than the examples there since there are 3-levels of nested component here from my parent component to the custom datepicker component to the actual datepicker plugin component. — Jed, Jun 15 '17 at 05:53
Add the component code for the three components, we can look into it. The idea is to use `EventEmitter` to pass values from child to parent. You can also make use of Banana Braces `[(x)]` but will have to implement `xChanges` event for `x` in your custom component. Add `parent.component.ts` , `my-custom-datepicker.component.ts` code and a link to the `datetime` component that you are using. — sabithpocker, Jun 15 '17 at 06:06
There i've added it. Basically I just want to display the selected date from the custom datepicker. — Jed, Jun 15 '17 at 06:16
@ShaMoh I had no luck on this, I just decided to copy-paste the configuration of all the places where i've used the datepicker. Really hope there was a way for this. — Jed, Feb 19 '18 at 05:55

sabithpocker · Answer 1 · 2017-06-15T07:25:10.623

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:

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>?

score 0 · Answer 2 · answered Jun 15 '17 at 05:43

0

Give a try like this

in my-custom-datepicker.ts

@Input() model: any;

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

answered Jun 15 '17 at 05:43

balajivaishnav

2,795
4
23
38

Yes I did put that, please consider all the basic are there. – Jed Jun 15 '17 at 05:51

Angular 2 Pass values on nested components

2 Answers2