Material Design select
Our Material Select is a beautiful alternative for standard select.
MDB provides you a variety of options and variations.
Basic example Premium component
<div class="row">
<div class="col-md-6">
<label>Example label</label>
<ng-select [options]="optionsSelect" placeholder="Choose your option"></ng-select>
</div>
</div>
Data structure:
export class AppComponent {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
}
Color variations Premium component
<div class="row">
<div class="col-md-4 m-b-3">
<label>Blue label</label>
<ng-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></ng-select>
</div>
</div>
Data structure:
export class AppComponent {
colorSelect: Array<any>;
ngOnInit() {
this.colorSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
{ value: '4', label: 'Option 4' },
{ value: '5', label: 'Option 5' },
];
}
}
In order to change a select color use one of the following classes:
1. .dropdown-primary
2. .dropdown-danger
3. .dropdown-default
4. .dropdown-secondary
5. .dropdown-success
6. .dropdown-info
7. .dropdown-warning
8. .dropdown-ins
9. .dropdown-dark
Multiple select Premium component
<div class="row">
<div class="col-md-6">
<label>Example label</label>
<ng-select [options]="optionsSelect" [multiple]="true" placeholder="Choose your option"></ng-select>
</div>
</div>
Data structure:
export class AppComponent {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
}
Options groups Premium component
<div class="row">
<div class="col-md-6">
<label>Example label</label>
<ng-select [options]="groupOptionsSelect" placeholder="Choose your option"></ng-select>
</div>
</div>
Data structure:
export class AppComponent {
groupOptionsSelect: Array<any>;
ngOnInit() {
this.groupOptionsSelect = [
{ value: '1', label: 'Group 1', group: true },
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '2', label: 'Group 2', group: true },
{ value: '3', label: 'Option 3' },
{ value: '4', label: 'Option 4' },
];
}
}
Select with icons Premium component
<div class="row">
<div class="col-md-6">
<label>Example label</label>
<ng-select [options]="iconsSelect" placeholder="Choose your option"></ng-select>
</div>
</div>
Data structure:
export class AppComponent {
iconsSelect: Array<any>;
ngOnInit() {
this.iconsSelect = [
{ value: '1', label: 'Option 1', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },
{ value: '2', label: 'Option 2', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },
{ value: '3', label: 'Option 3', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg' },
];
}
}
Disabled select Premium component
You can make your select unselectable, by adding [disabled]="disabled"
to ng-select
.
<div class="row">
<div class="col-md-6">
<label>Example label</label>
<ng-select [options]="optionsSelect" [disabled]="disabled" placeholder="Choose your option"></ng-select>
</div>
<div class="col-md-6">
<label>Example label</label>
<ng-select [options]="disOptionsSelect" placeholder="Choose your option"></ng-select>
</div>
</div>
Data structure:
export class AppComponent {
optionsSelect: Array<any>;
disabled: boolean = true;
disOptionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' } ,
{ value: '2', label: 'Option 2' } ,
{ value: '3', label: 'Option 3' } ,
];
this.disOptionsSelect = [
{ value: '1', label: 'Option 1', disabled: true },
{ value: '2', label: 'Option 2' } ,
{ value: '3', label: 'Option 3' } ,
];
}
}
Default select
Just add a .browser-default
class to the select
tag.
<label>Default Select</label>
<select class="browser-default">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>