CODEWITHSUNDEEP
angulartwitter-bootstrap-3bootstrap-select
claudioz
claudioz

Reputation: 1231

Input box appears, but nothing happens when you click

I'm developing a web application using Angular 6. I'm using the bootstrap library bootsrap-select to create a custom input component that behaves like a element ( I needed the live research, for example). I entered the right dependencies in angular.json:

"scripts": [ 
              "./node_modules/path-to-files/bootstrap-select/js/bootstrap-select.js"
           ]

The problem is that if I insert simple code, like this:

<select class="form-control selectpicker" data-width="250px" data-live-search="true" 
        title="Select the right value" data-size="10">
    <option value="a">Value 1</option>
    <option value="b">Value 2</option>
    <option value="c">Value 3</option>
</select>

The problem is that the input box appears, but nothing happens when you click on it! enter image description here

How can I enable all features using Angular with TypeScript (without pure JavaScript )? Thanks for the help

Upvotes: 1

Views: 3542

Answers (1)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

You can install bootstrap-select types from typeDefinition. https://www.npmjs.com/package/@types/bootstrap-select

Step1 :

declare var $:any;

Step2:

$('.selectpicker').selectpicker('refresh');

// Angular way of doing.

Template:

<select #selectdp class="form-control selectpicker" data-width="250px" data-live-search="true" 
        title="Select the right value" data-size="10">
    <option value="a">Value 1</option>
    <option value="b">Value 2</option>
    <option value="c">Value 3</option>
</select>

Component:

@ViewChild('selectdp') selectdp: ElementRef;
this.selectdp.nativeElement.selectpicker('refresh');

Check whether this below URL helps. bootstrap-select dropdown options not getting loaded sometime

Also make sure you have jquery and @types are installed as dependencies.

Upvotes: 4

Related Questions