Multiple select
Use it on mobile and desktop for listing different options with multiple select. It can be tied to an input, native select or rendered inline. Turn it on by setting selectMultiple to true.
As an alternative to the checkbox list it works great for category filtering... eg. e-commerce solutions.
Looking for single value selection? Check out the previous example →
Demo
html<mbsc-select
[data]="myData"
[selectMultiple]="true"
[ touchUi] ="
tsmyData = [
{ text: 'Books', value: 1 },
{ text: 'Movies, Music & Games', value: 2' },
{ text: 'Electronics & Computers', value: 3 },
{ text: 'Home, Garden & Tools', value: 4 },
{ text: 'Health & Beauty', value: 5 },
{ text: 'Toys, Kids & Baby', value: 6 },
{ text: 'Clothing & Jewelry', value: 7 },
{ text: 'Sports & Outdoors', value: 8 },
{ text: 'Automotive & Industrial', value: 9 }
];
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
myData = [
{
value: 1,
text: 'Books',
},
{
value: 2,
text: 'Movies, Music & Games',
},
{
value: 3,
text: 'Electronics & Computers',
},
{
value: 4,
text: 'Home, Garden & Tools',
},
{
value: 5,
text: 'Health & Beauty',
},
{
value: 6,
text: 'Toys, Kids & Baby',
},
{
value: 7,
text: 'Clothing & Jewelry',
},
{
value: 8,
text: 'Sports & Outdoors',
},
{
value: 9,
text: 'Automotive & Industrial',
},
];
}
<mbsc-page>
<mbsc-select
[data]="myData"
[selectMultiple]="true"
label="Multi-select"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please select..."
></mbsc-select>
</mbsc-page>