projects/common/lib/components/dropdown/dropdown.component.ts
| selector | common-dropdown |
| styleUrls | ./dropdown.component.scss |
| templateUrl | ./dropdown.component.html |
Properties |
|
Methods |
Inputs |
constructor(controlDir: NgControl)
|
||||||
|
Parameters :
|
| addTag | |
Type : boolean
|
|
Default value : false
|
|
| addTagText | |
Type : string
|
|
Default value : 'Add'
|
|
| autocorrect | |
Type : string
|
|
| clearable | |
Type : boolean
|
|
Default value : true
|
|
| items | |
Default value : []
|
|
| label | |
Type : string
|
|
Default value : 'Default label'
|
|
| placeholder | |
Type : string
|
|
| required | |
Type : boolean
|
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(value: any)
|
||||||
|
Parameters :
Returns :
void
|
| Public _onChange |
Default value : () => {...}
|
| Public _onTouched |
Default value : () => {...}
|
| Public controlDir |
Type : NgControl
|
Decorators :
@Optional()
|
| Public model |
Type : any
|
| Public objectId |
Type : string
|
Default value : UUID.UUID()
|
|
Inherited from
Base
|
|
Defined in
Base:11
|
|
An identifier for parents to keep track of components |
import { Component, Input, Optional, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { Base } from '../../models/base';
@Component({
selector: 'common-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent extends Base implements ControlValueAccessor {
public model: any;
@Input() items = [];
@Input() label: string = 'Default label';
@Input() placeholder: string;
@Input() autocorrect: string;
@Input() addTag: boolean = false;
@Input() addTagText: string = 'Add';
@Input() required: boolean;
@Input() clearable: boolean = true;
public _onChange = (_: any) => {};
public _onTouched = () => {};
constructor( @Optional() @Self() public controlDir: NgControl ) {
super();
if ( controlDir ) {
controlDir.valueAccessor = this;
}
}
writeValue(value: any): void {
this.model = value;
}
registerOnChange(fn: any): void {
this._onChange = fn;
}
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
}
<label for="{{label}}_{{objectId}}" class="control-label">{{label}}</label>
<ng-select name='{{label}}_{{objectId}}'
labelForId='{{label}}_{{objectId}}'
[ngModel]='model'
(ngModelChange)='model=$event;'
[items]='items'
placeholder='{{ placeholder }}'
autoCorrect='{{ autocorrect }}'
[addTag]='addTag'
addTagText='Add question'
[required]='required'
(change)='_onChange($event)'
(blur)='_onTouched()'
[clearable]='clearable'
(close)='_onTouched()'></ng-select>
<common-error-container
[displayError]="controlDir && (controlDir.touched || controlDir.dirty) && controlDir?.errors">
<div *ngIf="controlDir?.errors?.required">{{label}} is required.</div>
</common-error-container>