src/app/modules/shared/components/custom-multi-select/custom-multi-select.component.ts
selector | app-custom-multi-select |
templateUrl | custom-multi-select.component.html |
field
|
Type: |
inputData
|
Type: |
valueField
|
Default value: |
selectedValue
|
$event type: EventEmitter
|
constructor(cdr: ChangeDetectorRef, resourceService: ResourceService)
|
checkbox |
checkbox(name: any)
|
Returns:
void
|
selectAll |
selectAll(code: any)
|
Returns:
void
|
selectedOption |
selectedOption(event: any)
|
Returns:
void
|
checkBox |
checkBox: |
refresh |
refresh: |
Default value: true
|
resourceService |
resourceService: |
selectAllCheckBox |
selectAllCheckBox: |
Default value: false
|
import { ResourceService } from './../../services/resource/resource.service';
import { Component, OnInit, ChangeDetectorRef, Input, EventEmitter, Output, OnChanges } from '@angular/core';
import * as _ from 'lodash-es';
@Component({
selector: 'app-custom-multi-select',
templateUrl: './custom-multi-select.component.html'
})
export class CustomMultiSelectComponent implements OnInit {
@Input() inputData: Array<string>;
@Input() field: object;
@Input() valueField = 'name';
checkBox: object;
selectAllCheckBox = false;
refresh = true;
@Output() selectedValue = new EventEmitter<any>();
constructor( private cdr: ChangeDetectorRef, public resourceService: ResourceService) { }
checkbox(name) {
if (this.checkBox[name]) {
this.checkBox[name] = false;
this.selectAllCheckBox = false;
} else {
this.checkBox[name] = true;
}
}
selectAll(code) {
this.inputData = [];
this.selectAllCheckBox = !this.selectAllCheckBox;
if (this.selectAllCheckBox) {
_.forEach(this.field['range'], (value) => {
this.inputData.push(value.name);
this.checkBox[value.name] = true;
});
} else {
this.inputData = [];
_.forEach(this.field['range'], (value) => {
this.checkBox[value.name] = false;
});
}
this.selectedValue.emit( this.inputData);
this.refresh = false;
this.cdr.detectChanges();
this.refresh = true;
}
selectedOption(event) {
const fieldName = [];
_.forEach(this.field['range'], (value, key) => {
fieldName.push(value.name);
});
if (fieldName.length === event.length) {
this.selectAllCheckBox = true;
}
this.selectedValue.emit(event);
}
ngOnInit() {
this.checkBox = {};
const name = [];
if (this.inputData) {
_.forEach(this.field['range'], (value, key) => {
name.push(value.name);
});
if (name.length === this.inputData.length) {
this.selectAllCheckBox = true;
}
_.forEach(this.inputData, (value) => {
this.checkBox[value] = true;
});
}
}
}