Search code examples
ngx-bootstrap

importing components in ngx-bootstrap throws 'not a known element' error


I imported the datepicker and it shows up fine.

But when I try to import a typeahead or buttons or anything, I get the <whatever> is not a known element error.

What I'm doing is import the module in the app.module like that:

import {DatepickerModule} from 'ngx-bootstrap/datepicker';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
// also tried:
// import { DatepickerModule, TypeaheadModule... } from 'ngx-bootstrap';
// ..but again no luck
...
imports: [
   DatepickerModule.forRoot(), //only this works 
   TypeaheadModule.forRoot(),
   ButtonsModule.forRoot(),
   ...]

Then on my history.module in a same way with the only difference that .forRoot() is now omitted.

Then on a child component of the parent history component I have:

<span *ngIf="showFilters" class="value bootstrap-iso" >
  <div style="display:inline-block;">
    <datepicker
      [(ngModel)]="dt"
      [datepickerMode]="'month'"
      [showWeeks]="false"
      [dateDisabled]="dateDisabled"
      [maxDate]="today">
    </datepicker> 
  </div>
</span>

which works, but for example these don't work:

<typeahead [typeahead]="'documents'"></typeahead>  
<btnCheckbox></btnCheckbox>

Doesn't matter if I include ngModel or other attributes, I always get the not a known element error. So I assume it has to do with my imports, my naming, or somethng, but honestly I can't see what's missing.

EDIT: Using Angular 4, "@angular/cli": "1.1.1", "ngx-bootstrap": "^1.7.1", "bootstrap": "^4.0.0-alpha.6", "typescript": "~2.3.3"


Solution

  • Well, I actually have to add the input shown in the template section in the documentation.

    So this works:

    <input [(ngModel)]="selected"
        [typeahead]="documents"
        class="form-control">
    

    Because the documentation mentions Selector and Exported as I thought we should use these values. I thought the templates are just showing how the components work under the hood.