While I can achieve this with custom JavaScript, I'm curious if Angular 4 has any built-in features that could help. I have a list of checkboxes that are scrollable and a search input above them. My goal is to enable users to quickly jump to a section in the list as they type into the search input field. Here's my HTML:
<!-- Sold To -->
<div class="col-md-12 input-container">
<div class="checkbox-group">
<input type="search" placeholder="Jump to Soldto...">
<div class="checkbox-wrap">
<mat-checkbox *ngFor="let option of soldToOptions">
{{ option }}
</mat-checkbox>
</div>
</div>
</div>
Here's a sample list of the array I'm looping through for the checkboxes (approximately 300 entries in total)...
soldToOptions = [
'1028341000-MITSUBISHI WONOKE MENTOR-DALLAS',
'1018551000-ADVANCE STARTER TEST-CINCINNATI',
'1030591000-AMERICAN JOYRIDE CARTHAGE-SAN FRANCISCO',
'1023221000-TESTING GENERAL OAKLAND-OAKLAND'
];
My first step would be to alphabetically order these based on the content after the initial '-'. I'm specifically looking to see if Angular 4 offers functionality to match the user's input with an entry from the array and smoothly navigate to that specific section within the scrollable checkboxes. My intention is not to filter the list, but to move to the correct position within it. Any assistance on this matter is highly appreciated.