typescript SD-7.ts

Posted 2021-05-20

export const VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => NbDropdownComponent),
  multi: true,
};

@Component({
  selector: 'nb-dropdown',
  template: `
    <div class="dropdown" [class.open]="isOpen" (click)="isOpen = !isOpen">
     <button>
       <ng-container [ngTemplateOutlet]="match.tpl"    [ngOutletContext]="selected">
       </ng-container>
       <span *ngIf="!selected.$implicit">{{placeholder}}</span>       
     </button>
     <ul> 
        <li *ngFor="let option of nbSelectOptions" (click)="select(option)">
          <a href="#">
           <ng-container [ngTemplateOutlet]="option.tpl">
           </ng-container>
          </a>
        </li>
     </ul>
    </div>
  `,
  providers: [VALUE_ACCESSOR]
})
export class NbDropdownComponent implements ControlValueAccessor {
  isOpen = false;
  @Input() placeholder;
  @ContentChild(NbSelectMatchDirective) match;
  @ContentChildren(NbSelectOptionDirective) nbSelectOptions;
  selected = {}

  writeValue(selected) : void {
    if( selected ) {
      this.setSelected(selected);
    }
  }

  registerOnChange(fn) : void {
    this.onChange = fn;
  }

  select(nbSelectMatch) {
    this.setSelected(nbSelectMatch);
    this.onChange(nbSelectMatch.option);
  }

  setSelected(nbSelectMatch) {
    this.selected = {
      $implicit: nbSelectMatch.option ? 
                 nbSelectMatch.option : 
                 nbSelectMatch
    }
  }
}