Currently, I am working with ngbdatepicker in Bootstrap. I have added a datepicker selector to appcomponent.html and the datepicker is showing up. Now, I need to retrieve that model value into the controller so that I can pass it to the parent appcomponent. To achieve this, I added a (change) method to the datepicker, but it seems to be removing that method from the input. Can anyone suggest another way for me to read and pass that value to the parent component?
Thank you in advance.
In the template below, I am using the child selector to open the datepicker. I have added a change method, but it's not triggering on the date selection, so I'm unable to emit the event.
Parent Component:
<ng-template #modalContent let-close="close" *ngIf="true">
<div class="modal-header">
<h5 class="modal-title">Add new event</h5>
<button type="button" class="close" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label>Start Date</label><date-pick (change)="updateFromChild($event)"></date-pick>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
</div>
</ng-template>
Child Component:
import {Component, Input, Output, EventEmitter} from '@angular/core'
@Component({
selector: 'date-pick',
templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
model;
constructor(){ }
@Output() change: EventEmitter<any> = new EventEmitter<any>();
onChange() {
console.log('call');
this.change.emit(this.model)
}
}Child Template:
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" (change)="onChange()">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
<img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
</button>
</div>
</div>
</div>
</form>