В чем разница между Select Module и Select Component в ng2-select?

Question

В моем приложении я реализовал ng2-select с помощью модуля выбора, где я не смог очистить данные после его использования, а также не смог отобразить выбранный элемент из источника данных при загрузке.

Я пытался предложенные изменения https://github.com/valor-software/ng2-select/issues/354, но это не работает для меня из-за реализации модуля Select.

import {SelectModule} from 'ng2-select';
import {ngSelect} from '@app/modules/employee/employee.model';

export class CreateEmployeeComponent implements OnInit, AfterViewInit {
  userForm: FormGroup;
  submitted = false;
  designationNames;

///After constructor

public items: ngSelect[] = [];

  public value: any = {};
  private _disabledV: string = '0';
  public disabled: boolean = false;

  private get disabledV(): string {
    return this._disabledV;
  }

  private set disabledV(value: string) {
    this._disabledV = value;
    this.disabled = this._disabledV === '1';
  }

  public selected(value: any): void {
    this.manageSelectDesignation('push',value.id);
    console.log('Selected value is: ', value);
  }

  public removed(value: any): void {
    this.manageSelectDesignation('pop',value.id);
    console.log('Removed value is: ', value);
  }

  public typed(value: any) : void { 
    let el: HTMLElement = document.getElementsByClassName('ui-select-choices dropdown-menu')[0] as HTMLElement;
    if (typeof el !== 'undefined') 
      { el.style.display = 'block'; } 
  }

  public refreshValue(value: any): void {
    this.value = value;
    console.log('Available Items in the value is: ', value);
  }

    this.designationService.GetAllDesignation().subscribe((res) => {
      this.designNames = res.items;
      res.items.forEach((item, i) => {
        this.items.push({id : item.name, text: item.name}); // Both id & name are designation names only
      });
    });

  /// storing data into FormArray with other fields

  manageSelectDesignation(type,value) {
    const formArray: FormArray = this.userForm.get('designationNames') as FormArray;
    if (type==='push') {
      formArray.push(new FormControl(value));
    } else {
      let i = 0;
      formArray.controls.forEach((ctrl: FormControl) => {
        if (ctrl.value === value) {
          formArray.removeAt(i);
          return;
        }
        i++;
      });
    }
  }

this.appService.apiEmployeePost(this.userForm.value)
      .subscribe(
        (response) => {                           // Next callback
          console.log(response)
          if (this.logDetails != null){          
            this.appService.apiLogPost(logDetails).subscribe(
              (res) => {
                this.toastr.success('succesfully');
                this.closeSlider.emit();
              },
              (err) => {
                this.toastr.error(err.error.error.message);
                this.closeSlider.emit();
              });  
          }else{
            this.toastr.success('succesfully');
                this.closeSlider.emit();
          }

        },
        (error) => {                              // Error callback
          console.log(error);
          console.log(error.status);
          console.log(error.error.error.message);
          this.toastr.error(error.error.error.message);
          this.closeSlider.emit();
        }
      );
  }  

HTML

<div class="ng-selectorinput" *ngIf="items.length > 0">
              <ng-select [allowClear]="true" 
                  [multiple]="true"
                  [items]="items"
                  [disabled]="disabled"
                  (data)="refreshValue($event)"
                  (selected)="selected($event)"
                  (removed)="removed($event)"
                  (typed)="typed($event)"
                  placeholder="Select Designation">
              </ng-select>
          </div>