mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-31 21:51:48 +01:00
feat(inputs\multi-checkbox): add multi-checkbox directive
This commit is contained in:
parent
e63812f011
commit
70cdff101f
12 changed files with 270 additions and 94 deletions
|
|
@ -0,0 +1,45 @@
|
|||
import {Component, Input, Self} from '@angular/core';
|
||||
import {ControlValueAccessor, NgModel} from '@angular/forms';
|
||||
import {BaCheckbox} from '../baCheckbox';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-multi-checkbox[ngModel]',
|
||||
template: require('./baMultiCheckbox.html'),
|
||||
directives: [BaCheckbox]
|
||||
})
|
||||
export class BaMultiCheckbox implements ControlValueAccessor {
|
||||
@Input() baMultiCheckboxClass:string;
|
||||
@Input() propertiesMapping:any;
|
||||
|
||||
public model: NgModel;
|
||||
public state: boolean;
|
||||
|
||||
public constructor(@Self() state:NgModel) {
|
||||
this.model = state;
|
||||
state.valueAccessor = this;
|
||||
}
|
||||
|
||||
public getProp(item: any, propName: string): string {
|
||||
const prop = this.propertiesMapping[propName];
|
||||
|
||||
if (!prop) {
|
||||
return item[propName];
|
||||
} else if (typeof prop === 'function') {
|
||||
return prop(item);
|
||||
}
|
||||
return item[prop];
|
||||
}
|
||||
public onChange(value: any): void {}
|
||||
public onTouch(value: any): void {}
|
||||
public writeValue(state: any): void {
|
||||
this.state = state;
|
||||
}
|
||||
|
||||
public registerOnChange(fn: any): void {
|
||||
this.onChange = function(state: boolean) {
|
||||
this.writeValue(state);
|
||||
this.model.viewToModelUpdate(state);
|
||||
}
|
||||
}
|
||||
public registerOnTouched(fn: any): void { this.onTouch = fn; }
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<div class="{{baMultiCheckboxClass}}">
|
||||
<ba-checkbox *ngFor="let item of state"
|
||||
[(ngModel)]="item[propertiesMapping.model]"
|
||||
[baCheckboxClass]="getProp(item, 'baCheckboxClass')"
|
||||
[label]="getProp(item, 'label')"
|
||||
[disabled]="getProp(item, 'disabled')"
|
||||
[value]="getProp(item, 'value')"
|
||||
id="{{getProp(item, 'id')}}">
|
||||
</ba-checkbox>
|
||||
</div>
|
||||
1
src/app/theme/components/baMultiCheckbox/index.ts
Normal file
1
src/app/theme/components/baMultiCheckbox/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './baMultiCheckbox.component'
|
||||
Loading…
Add table
Add a link
Reference in a new issue