Angular 5 can't bootstrap select directive it's not working

Question

I have an angular 5 project and i want to use bootstrap-select pluging inside my component view.

I have a directive.

@Directive({
// tslint:disable-next-line:directive-selector
selector: '[bootstrapSelect]',
exportAs: 'bootstrap-select'
})
export class BootstrapSelectDirective implements OnInit, OnDestroy {


private changedSubscription: Subscription;
private shownSubscription: Subscription;
private hiddenSubscription: Subscription;

@Input()
required: string;

@Input()
set ngModel(values: string | string[]) {
    setTimeout(() => this.selected = values);
}


@Output()
ngModelChange = new EventEmitter();

@Output()
shown = new EventEmitter();

@Output()
hidden = new EventEmitter();


constructor(private el: ElementRef) {
    // tslint:disable-next-line:max-line-length
    this.changedSubscription = Observable.fromEvent($(this.el.nativeElement), 'changed.bs.select').subscribe((e: any) => setTimeout(() => this.ngModelChange.emit(this.selected)));
    // tslint:disable-next-line:max-line-length
    this.shownSubscription = Observable.fromEvent($(this.el.nativeElement), 'shown.bs.select').subscribe((e: any) => setTimeout(() => this.shown.emit()));
    // tslint:disable-next-line:max-line-length
    this.hiddenSubscription = Observable.fromEvent($(this.el.nativeElement), 'hidden.bs.select').subscribe((e: any) => setTimeout(() => this.hidden.emit()));
}



ngOnInit() {
    $(this.el.nativeElement).selectpicker();

    if (this.requiredAttribute) {
        $(this.el.nativeElement).selectpicker('setStyle', 'required', 'add');
    }

    setTimeout(() => {
        this.refresh();
        this.doValidation();
    });

}


ngOnDestroy() {
    if (this.changedSubscription) {
        this.changedSubscription.unsubscribe();
    }

    if (this.shownSubscription) {
        this.shownSubscription.unsubscribe();
    }

    if (this.hiddenSubscription) {
        this.hiddenSubscription.unsubscribe();
    }

    $(this.el.nativeElement).selectpicker('destroy');
}

and a in simple page i use it.

<div class="form-group">
    <label for="homePage" class="col-sm-3 control-label">{{'preferences.HomePage' | translate}} </label>
    <div class="col-sm-4">
        <select id="homePage" [(ngModel)]="configurations.homeUrl" #homePageSelector="bootstrap-select" bootstrapSelect class="selectpicker form-control">
            <option data-icon="fa fa-tachometer" data-subtext="(Default)" value="/">{{'preferences.Dashboard' | translate}}</option>
            <option data-icon="fa fa-cog" value="/settings">{{'preferences.Settings' | translate}}</option>
        </select>
    </div>
    <div class="col-sm-5">
        <p class="form-control-static text-muted small">{{'preferences.HomePageHint' | translate}}</p>
    </div>
</div>

but when i try to use the directive inside a form i get that error

ERROR Error: Uncaught (in promise): Error: Template parse errors:There is no directive with "exportAs" set to "bootstrap-select" ("-lg-9 col-md-9"> <select class="form-control selectpicker" [ERROR ->]#classRoomTypeIdSelector="bootstrap-select" bootstrapSelect name="classRoomTypeId" [(ngModel)]="class")

Here is my code trying to use the directive.

<div class="form-group">
                            <div class="col-lg-6">
                                <label class="col-lg-3 col-md-3 control-label">Tipo</label>
                                <div class="col-lg-9 col-md-9">
                                    <select class="form-control selectpicker" #classRoomTypeIdSelector="bootstrap-select" bootstrapSelect name="classRoomTypeId" [(ngModel)]="classroomModel.classRoomTypeId" formControlName="classRoomTypeId">
                                        <option *ngFor="let option of classroomTypes" [value]="option.id">{{option.name}}</option>
                                    </select>
                                    <ul class="text-danger list-unstyled" *ngIf="classroomForm.controls['classRoomTypeId'].touched && classroomForm.controls['classRoomTypeId'].invalid">
                                        <li *ngIf="classroomForm.controls['classRoomTypeId'].errors.required">
                                            El tipo del aula es requerido
                                        </li>
                                    </ul>
                                </div>
                            </div>

Any idea why i can use the directive in one place and another not?

Answer 1

You need also to add that directive in the declarations of that module in which you have used it to make it visible for components of that module

@NgModule({ 
   ...
   declarations: [ BootstrapSelectDirective ]
   ...
})
export class ThatModule { }