CODEWITHSUNDEEP
angulartypescriptsemantic-uing2-semantic-ui
Zacke
Zacke

Reputation: 33

Clearing selection in an angular 2 semantic ui dropdown

So I have a optional dropdown list in a form and I want to be able to clear the selection after clicking on one of the values. I do not have nor do I want to use any jQuery in my component.

The dropdown component:

<sui-select 
  class="selection"
  [(ngModel)]="value"
  [options]="options"
  labelField="text"
  valueField="value"
  [isSearchable]="searchable"
  [isDisabled]="isDisabled"
  [placeholder]="placeholder | translate"
  #select>
<sui-select-option *ngFor="let option of select.filteredOptions" [value]="option">
</sui-select-option>


@Component({
  selector: "[dropdown]",
  templateUrl: "./dropdown.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [MakeValueAccessorProvider(DropDownComponent)]
})

export class DropDownComponent extends BaseComponent<string> {
  @Input() label: string;
  @Input() placeholder: string;
  @Input("items") options: TextValue[];
  @Input() searchable: boolean = true;
  @HostBinding("class.field") fieldClass: boolean = true;

ngOnChanges() {
    if(this.options && this.options.length > 0) {
        this.options.forEach(o => o.text = this.translateService.translate(o.text))
    }
  }
}

Usage of the dropdown:

<div dropdown formControlName="primaryInstructorId" [items]="instructorItems" label="labels/selectinstructor" placeholder="labels/selectinstructor"></div>

<div *ngIf="form.get('primaryInstructorId').value" dropdown formControlName="secondaryInstructorId" [items]="instructorItems" label="labels/selectinstructor" placeholder="labels/selectinstructor"></div>

And in the component where I am using it I want to be able to clear the dropdown with the control name: secondaryInstructorId. Either by clicking on a value that I insert into the 0 index of the array or by clicking a "x" button next to the value.

Upvotes: 1

Views: 488

Answers (0)

Related Questions