Angular 15 functional docs

@stackline/angular-multiselect-dropdown

Angular 15 documentation for the tested @stackline/angular-multiselect-dropdown package line at 15.0.1. The live section below runs a real Angular 15.2.10 application with real <angular-multiselect> components.

Package 15.0.1 for Angular 15.x

Runtime Angular 15.2.10

Peer range >=15.0.0 <16.0.0

Live matrix 12 cases x 2 skins

Setup in 3 steps

Install the Angular 15 line

Install

npm install @stackline/angular-multiselect-dropdown@15.0.1 --save-exact

Register the module

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AngularMultiSelectModule } from '@stackline/angular-multiselect-dropdown';

@NgModule({
  imports: [BrowserModule, FormsModule, AngularMultiSelectModule]
})
export class AppModule {}

Render the dropdown

<angular-multiselect
  [data]="countries"
  [(ngModel)]="selectedCountries"
  [settings]="dropdownSettings">
</angular-multiselect>

<angular2-multiselect> remains available only as a legacy compatibility alias for applications migrating from the old outdated plugin. New code should use <angular-multiselect>.

Functional live tests

Real Angular 15.2.10 test application

This embedded app is the Angular 15 functional test layout used for local validation: skin switcher, classic cases, material cases, selected model updates, search, grouping, disabled state, lazy list, templates, and event logging.

Code used by the live app

Same API shape as the functional tests

Data

countries = [
  { id: 1, itemName: 'Brazil' },
  { id: 2, itemName: 'Canada' },
  { id: 3, itemName: 'Portugal' },
  { id: 4, itemName: 'United States' }
];

Settings

makeSettings(theme: string, text: string, options: any) {
  var settings: any = {
    singleSelection: false,
    text: text,
    selectAllText: 'Select all',
    unSelectAllText: 'Clear all',
    enableCheckAll: true,
    enableSearchFilter: true,
    badgeShowLimit: 4,
    maxHeight: 260,
    showCheckbox: true,
    theme: theme,
    skin: theme
  };

  for (var key in options) {
    if (options.hasOwnProperty(key)) {
      settings[key] = options[key];
    }
  }

  return settings;
}

Template slots

<angular-multiselect
  [data]="templateItems"
  [(ngModel)]="selectedTemplateItems"
  [settings]="templateSettings">
  <c-badge>
    <ng-template let-item="item">
      <span class="swatch-chip">{{ item.itemName }}</span>
    </ng-template>
  </c-badge>
  <c-item>
    <ng-template let-item="item">
      <strong>{{ item.itemName }}</strong>
    </ng-template>
  </c-item>
</angular-multiselect>