Angular 18 ngbDatepicker não atualiza valor com ngModel

Eu tento usar o ngbDatepicker, mas não consigo fazê-lo funcionar com o ngModel. Ele não atualiza a variável relacionada, nem extrai seu valor dela.

Aqui estão alguns passos simples para reproduzir meu problema do zero.

Criei um novo aplicativo Angular 18 como este:

ng new try-app

Selecionei SCSS e Sem renderização do lado do servidor.

Então instalei o ng-bootstrap assim:

npm install @ng-bootstrap/[email protected]

Então editei try-app\src\app\app.component.ts - ficou assim:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbDateStruct, NgbModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, NgbModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
    myDate?: NgbDateStruct;
    show() {
        console.log(this.myDate);
        alert(this.myDate);
    }
}

Então editei try-app\src\app\app.component.html - ficou assim:

<input class="form-control" name="myDate" [(ngModel)]="myDate" ngbDatepicker #myDate="ngbDatepicker" (click)="myDate.toggle()" readonly />
<input type="button" (click)="show()" value="Show" />

Então executei meu aplicativo com o ng serve.

Quando seleciono uma data usando o campo de entrada do seletor de data, digamos 2025-01-06 e então clico no botão Mostrar, ele diz indefinido.

Se eu tentar dar um valor inicial para myDate, assim:

myDate: NgbDateStruct = {year: 2000, month: 2, day: 10}

O valor da data na variável myDate não aparece no campo de entrada.