v3: Access Line class from "@ng-bootstrap/ng-bootstrap/util/accessibility/live"

For a number of reasons, I’ve subclassed NgbTypeahead. And to get the the constructor chain to work, I need to include the Live (@ng-bootstrap/ng-bootstrap/util/accessibility/live) class as a parameter.

With v2.x this worked fine, but I can’t get it to work with the new v3 packaging format.

Intellisense still knows about Live, but I can’t compile:

import {
  OnInit, Directive, ElementRef, ViewContainerRef, Renderer2, Injector, ComponentFactoryResolver, NgZone, forwardRef, Input
} from "@angular/core";
import { NgbTypeahead, NgbTypeaheadConfig, NgbTypeaheadWindow  } from "@ng-bootstrap/ng-bootstrap";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { Observable } from "rxjs";

//THIS IS THIS PROBLEM
import { Live } from "@ng-bootstrap/ng-bootstrap/util/accessibility/live";
//THIS IS THE PROBLEM

export class MyTypeahead extends NgbTypeahead {
  constructor(private _elementRef2: ElementRef, _viewContainerRef: ViewContainerRef, _renderer: Renderer2,
    _injector: Injector, componentFactoryResolver: ComponentFactoryResolver, config: NgbTypeaheadConfig,
    ngZone: NgZone, live: Live) {
    super(_elementRef2, _viewContainerRef, _renderer, _injector, componentFactoryResolver, config, ngZone, live);
    }

  ...
}

Any ideas on how to access Live?

Angular: 6.1 ng-bootstrap: 3.0.0 Bootstrap: 4.1

[pkozlowski-opensource]

@dmostert I think that you are well past the point where you can simply extend the existing widget - you seem to have more specific needs which we don’t handle (yet) and this is OK.

As we are not ready to open up our widgets for extension I would suggest copy the code over to your project and maintain your own fork. Fully expect that this is not what you want to hear but writing widgets that can be sub-classed is entirely new challenge that we are not ready to accept at this point.

Closing as won’t fix.

[louisl]

Just updated to Angular 6.1 and ng-bootstrap 3.0.0 and I’m having a similar problem accessing utils in a custom NgbDateParserFormatter, was working fine in 2.x:

ERROR in ./src/app/shared/formatters/ngb-uk-date-parser.formatter.ts
Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap/util/util'

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'
import { Injectable } from '@angular/core'
import { isNumber, toInteger, padNumber } from '@ng-bootstrap/ng-bootstrap/util/util'

@Injectable()

export class NgbUkDateParserFormatter extends NgbDateParserFormatter {
  parse (value: string): NgbDateStruct {
    if (value) {
      const dateParts: Array<any> = value.trim().split('/')

      if (dateParts.length === 1 && isNumber(dateParts[0])) {
        return {
          day: toInteger(dateParts[0]),
          month: null,
          year: null
        }
      } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
        return {
          day: toInteger(dateParts[0]),
          month: toInteger(dateParts[1]),
          year: null
        }
      } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
        return {
          day: toInteger(dateParts[0]),
          month: toInteger(dateParts[1]),
          year: toInteger(dateParts[2])
        }
      }
    }

    return null
  }

  format (date: NgbDateStruct): string {
    return date ? `${isNumber(date.day) ? padNumber(date.day) : ''}/${isNumber(date.month) ? padNumber(date.month) : ''}/${date.year}` : ''
  }
}