CODEWITHSUNDEEP
angulartypescriptbootstrap-4ngb-datepicker
Deepak Patidar
Deepak Patidar

Reputation: 394

Angular bootstrap ngbdatepicker removing (change) method so Is there any other option to read model value on controller

I am trying with bootstrap ngbdatepicker I added datepicker selector to appcomponent.html and datepicker started showing there Now I need to read that model value into controller so I can pass it to parent appcomponent for that I added (change) method on datepicker but it is removing that method from input so how can I read and pass that value to parent. Is there any other option to read that value in controller and pass to parent

Thanks in advance

Below is the template in which I am using the child selector to open datepicker here I added change method but its not triggering on date selection so I am not able 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">&times;</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>

enter image description here

Upvotes: 0

Views: 7571

Answers (2)

N4zroth
N4zroth

Reputation: 1366

For reference, if anyone comes here, thinks they have exactly the same code but theirs isn't working, the order of ngModel and ngModelChange matters! NgModelChange has to be somewhere after ngModel or otherwise this won't work correctly. See https://github.com/angular/angular/issues/11234 for details.

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176946

based on your input , i did like this , and its working

installed : npm install --save @ng-bootstrap/ng-bootstrap

app.component.html

 <app-date-picker (selectDate)="change($event)" ></app-date-picker>

app.component.ts 

change(event) {
    alert(event);
    console.log(event);
  }

datepicker.component.html

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" (ngModelChange) = "change($event)" ngbDatepicker #d="ngbDatepicker">
      <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>

datepicker.component.ts 

@Component({
  selector: 'app-date-picker',
  templateUrl: './datepicker.component.html',
})
export class DatePickerComponent {
  model;
  @Output() selectDate = new EventEmitter<any>();

  change(event) {
    this.selectDate.emit(event);
  }
}

instead of (change)="onChange()" make use of ngOnModleChange, so it should be (ngModelChange)="onChange($event)"

 onChange(event) {
      console.log('call');
      this.change.emit(event);
  }

in angular you can do binding [(ngModel)]='propety' to perform two way binding to control.

If you have parent - child component scenario than you need EventEmitter, that publish value to your parent component. so you need to have this 

 //in child component
 @Output() selectDate = new EventEmitter<string>();
 //on change date push date 
 this.selectDate.emit(value);

in parent component it should be 

   <childComponent (selectDate) = 'OnSelectDate($event)'></childComponent>
   //in ts file you need to have method 
   OnSelectDate(event) {}

Upvotes: 1

Related Questions