angular2-select
Select box input module for Angular2 using Material Design. Based on official angular2-seed.
Dependencies
- Angular2 in version min. RC.6
- @angular2-material modules:
Instalation
npm install @baumi/angular2-select --save
Usage
Import module:
import { Angular2SelectModule } from 'angular2-select/angular2-select';
...
@NgModule({
imports: [
Angular2SelectModule,
...
],
...
})Use it in the template:
<bm-ng2-select
placeholder="Select a country"
(selectionChanged)="onSelectionChange($event);">
<bm-ng2-option value="PL">Poland</bm-ng2-option>
<bm-ng2-option value="US" disabled="true">USA</bm-ng2-option>
<bm-ng2-option value="DK" selected="true">Denmark</bm-ng2-option>
<bm-ng2-option value="FR">France</bm-ng2-option>
</bm-ng2-select>The <bm-ng2-select> component fully support two-way binding of ngModel, as if it was a normal <input> and can be also used as a formControl element:
export class AppComponent implements OnInit {
private demoForm: FormGroup;
constructor() {}
ngOnInit() {
this.demoForm = new FormGroup({
person: new FormControl('')
});
}
}<form [formGroup]="demoForm">
<bm-ng2-select
formControlName="person"
placeholder="Select person"
required=true
(selectionChanged)="onSelectionChange('Name', $event);">
<bm-ng2-option value="ANNA">Anna</bm-ng2-option>
<bm-ng2-option value="NATALIA">Natalia</bm-ng2-option>
<bm-ng2-option value="KASIA">Kasia</bm-ng2-option>
</bm-ng2-select>
</form>
<div class="error" *ngIf="!demoForm.controls.person.valid">
This field is required
</div>Development
- Clone or fork this repository
- Make sure you have node.js installed version 5+
- Make sure you have NPM installed version 3+
-
WINDOWS ONLYrunnpm install -g webpack webpack-dev-server typings typescriptto install global dependencies - run
npm installto install dependencies -
WINDOWS ONLYrunnpm run typings-installto install typings - run
npm startto fire up dev server - open browser to
http://localhost:5000
