Есть ли событие onHidden для ngb-datepicker? Если нет, как мы можем добавить события в пользовательские компоненты в angular?

Question

Я использую средство выбора даты из этого источника: https://ng-bootstrap.github.io/

И я хотел бы проверить, закрыт ли ngb-datepicker, потому что мне нужно изменить текст кнопки, где он срабатывает.

шаблон:

 <button (click)="dp.open(); changeText();">{{buttonText}}</button>
 <ngb-datepicker #dp 
     [(ngModel)]="model" 
     (onHidden)="changeButtonText2()"  <<---is this possible? >
/>

TS:

 import {Component} from '@angular/core';
 import {NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

 @Component({
    selector: 'ngbd-datepicker-basic',
    templateUrl: './datepicker-basic.html'
 })

 export class NgbdDatepickerBasic {

   buttonText: string = 'Open Calendar'

 constructor(private calendar: NgbCalendar) {
 }

 changeText() {
   this.buttonText = 'The Calendar is Open';
 }

 changeButtonText2() {
   this.buttonText = 'Open Calendar'
 }
}

У npx-bootstrap datepick есть это, но кажется, что ngb-datepicker не реализует эту функцию. Может кто-нибудь помочь мне создать обходной путь, чтобы мне не пришлось использовать ngx-bootstrap только для этого? Я уже добавил некоторые стили, так что...

Спасибо:)

Answer 1

Если вы используете всплывающее окно выбора даты и хотите изменить только текстовую кнопку

<form class="form-inline">
  <button (click)="dpk.toggle()">{{ dpk.isOpen() ? 'The Calendar is Open' : 'Open Calendar' }}</button>
  <div class="form-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #dpk="ngbDatepicker">
  </div>
</form>

если вы хотите настроить больше кода, используйте это:

@ViewChild('dpk') dpk: NgbDatepicker;

  ngAfterViewInit() {
    this.dpk['close'] = () => {
      if (this.dpk['isOpen']) {
        // super origin event
        this.dpk['_vcRef'].remove(this.dpk['_vcRef'].indexOf(this.dpk['_cRef'].hostView));
        this.dpk['_cRef'] = null;
        this.dpk['_closed$'].next();
        // custom code
        console.log('closed');
      }
    };
  }