I am working on an Angular 12 project. steps so far:
- I installed Select2 using NPM.
- I added the style sheet and js min files to Angular.json
- I also imported the min stylesheet in the styles.css file.
- I added a script ref to the ajax.googleApis jquery file. We have jquery installed but just in case.
- The online post referenced the class “js-example-basic-multiple”. I couldn’t find that class in the css file so I changed it to “select2-selection–multiple”. Neither class works.
Here is the relevent part of my component.html file:
<div class="row">
<div class="col-12">
<hr class="solid" />
</div>
</div>
<div class="row">
<div class=" flex col-4 label-align"><label>IMMS Only</label></div>
<div class="col-8">
<select id="stateSelect" class="select2-selection--multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="TX">Texas</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function () {
$('select2-selection--multiple').select2();
});
</script>
After I build, I don’t get the expected result:
I’m not seeing any errors in the console. Any suggestions are appreciated.