Yesterday I started working on a conversion of my Angular 1.x multiselect dropdown to Angular 2.x In a short amount of time, I think I’ve made pretty good progress. It’s not complete, but I was happy to be able to quickly get something comparable to my Angular 1.x directive.
The FilterPipe example really got me moving in the right direction. Using the same HTML template I used for the previous multiselect, I made some adjustments to tie-in the filtering, and added a Bootstrap4 styled dropdown with a button click to show the dropdown. The main stumbling blocks that I ran into were more Bootsrap4 related than anything. Coming from Boostrap3, the main things that were removed in Boostrap4 were glyphicons and feedback elements on form inputs. Fortunately, it wasn’t terribly difficult to use Font Awesome and some custom styling to mimic what was in the previous version.
The dropdown itself is the same as my previous version. A list of items is shown, these items can be filtered, and the items can be clicked/selected. To accomplish this, I use a combination of filters (as seen in my filter pipe demo), click events, and styling/class toggling.
While, it’s not complete, the basic Angular2 template for the multiselect looks like this:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" (click)="toggleSelect()">
<span class="pull-left" [innerHtml]="header"></span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu multi-select-popup" [ngStyle]="{display:isOpen ? 'block' : 'none'}" style="display:block;">
<li *ngIf="enableFilter" class="filter-container">
<div class="form-group has-feedback filter">
<input class="form-control" type="text" [value]="filterText" [placeholder]="filterPlaceholder" [formControl]="filterInput" />
<span class="clear-filter fa fa-times-circle-o form-control-feedback" (click)="clearFilter()"></span>
</div>
</li>
<li *ngFor="let item of _items | filter:{label:filterText}">
<a (click)="select(item)" class="dropdown-item">
<i class="fa fa-fw" [ngClass]="{'fa-check': item.checked, 'glyphicon-none': !item.checked}"></i>
<span [innerHtml]="item.label"></span>
</a>
</li>
</ul>
</div>
You can see it follows the same basic pattern that I used previously. The primary differences are related to the Bootstrap4 w/ Font Awesome changes and the Angular2 semantics. The few event handlers that are defined are very simple. At this point, all they really do is toggle simple scalar values. The more important parts are the filtering and such.
I won’t bore you too much with a lot of code because it’s not overly complex. As I get closer to feature parity of my previous 1.x Multiselect directive, I’ll keep you updated. If there are any aspects of the code that are not clear, feel free to leave a comment.
The below plunk shows a working example. You’ll notice that a secondary filtered is used to show the selected items pulled right.
* Edit be sure to check out my other multiselect posts:
https://long2know.com/2017/01/angular2-custom-form-validation/
https://long2know.com/2017/03/angular2-multiselect-handling-outside-clicks/