ng-bootstrap Datepicker defaulting the navigation year to 10 years before the current date

Question

I believe the default behaviour is to default the Year navigation to the current year with 10 years prior as the minimun date and 10 years forward as the maximun date. My date picker defualts to the mindate year which means that it should be showering the user the year 2021 but it is showing the user 2011. I can't understand where I have gone wrong as my code follows closely the examples on the ng-bootstrap site.

Here is my code.

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  hoveredDate: NgbDate | null = null;
  reportRequest: ReportsSearchRequest;
  isLoading: boolean = false;
  error: string;
  now: Date = new Date();
  startDate: NgbDate | null;
  endDate: NgbDate | null;

  constructor(private calendar: NgbCalendar,
    public formatter: NgbDateParserFormatter) {
    this.startDate = new NgbDate(this.now.getFullYear(), this.now.getMonth() + 1, 1);
    this.selectThisMonth();
  }
  ngOnInit(): void {
    this.init();
  }

  selectThisMonth(): void {
    const year: number = this.now.getFullYear();
    const month: number = this.now.getMonth() + 1;
    const day: number = new Date(year, month, 0).getDate();
    this.endDate = new NgbDate(year, month, day);
  }

-- HTML

  <pre>  <form class="form-inline">
        <div class="form-group hidden">
          <div class="input-group">
            <input
              name="datepicker"
              class="form-control"
              ngbDatepicker
              #datepicker="ngbDatepicker"
              [autoClose]="'outside'"
              (dateSelect)="onDateSelection($event)"
              [displayMonths]="2"
              [dayTemplate]="t"
              outsideDays="hidden"
              [startDate]="startDate!"
              tabindex="-1"
            />
            <ng-template #t let-date let-focused="focused">
              <span
                class="custom-day"
                [class.focused]="focused"
                [class.range]="isRange(date)"
                [class.faded]="isHovered(date) || isInside(date)"
                (mouseenter)="hoveredDate = date"
                (mouseleave)="hoveredDate = null"
              >
                {{ date.day }}
              </span>
            </ng-template>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <input
              #dpFromDate
              class="form-control"
              placeholder="yyyy-mm-dd"
              name="dpFromDate"
              [value]="formatter.format(startDate)"
              (input)="
                startDate = validateInput(startDate, dpFromDate.value)
              "
            />
            <div class="input-group-append">
              <i
                class="
                  fa fa-calendar
                  btn btn-outline-secondary
                  calendar
                "
                (click)="datepicker.toggle()"
                type="button"
                aria-hidden="true"
              ></i>
            </div>
          </div>
        </div>
        <div class="form-group ml-2">
          <div class="input-group">
            <input
              #dpToDate
              class="form-control"
              placeholder="yyyy-mm-dd"
              name="dpToDate"
              [value]="formatter.format(endDate)"
              (input)="endDate = validateInput(endDate, dpToDate.value)"
            />
            <div class="input-group-append">
              <i
                class="
                  fa fa-calendar
                  btn btn-outline-secondary
                  calendar
                "
                (click)="datepicker.toggle()"
                type="button"
                aria-hidden="true"
              ></i>
            </div>
          </div>
        </div>
      </form></pre>