I have a widget/component written in Angular 4 within the index.html file. Before and after this angular app, there are various HTML elements due to the nature of it being an additional component for the website.
The head section of the index file includes loading CSS and JS libraries like jQuery and Bootstrap.
To style select and option tags, I am utilizing the bootstrap-select.
The problem arises with select boxes that are hardcoded in the index file—they work perfectly fine. However, select boxes inside the Angular app only function properly initially.
When using the *ngIf directive to hide and show elements, if they are added back again, the two functions in the index file do not get called.
index.html
<script>
$(document).ready(function(){
if ($('.select_box').length > 0){initializeSelectPicker();}
});
$(window).load(function(){
if ($('.select_box').length > 0){adjustSelectPicker();}
});
$(window).resize(function(){
if ($('.select_box').length > 0){adjustSelectPicker();}
});
function initializeSelectPicker(){
$('.select_box').selectpicker({});
}
function adjustSelectPicker(){
$(this).find(".btn-group.bootstrap-select.select_box.show-tick .btn.dropdown-toggle.selectpicker.btn-default .filter-option.pull-left").css("width", "0");
$(this).each(function(){
var maxWidthBox = $(this).find(".btn-group.bootstrap-select.select_box.show-tick .btn.dropdown-toggle.selectpicker.btn-default").width() - 20;
$(this).find(".btn-group.bootstrap-select.select_box.show-tick .btn.dropdown-toggle.selectpicker.btn-default .filter-option.pull-left").css("width", maxWidthBox + "px");
});
}
</script>
Is there any way to call them in the ngOnChanges of a component?