Как настроить кнопку очистки в ng-select?

Question

Компонент Ng-select имеет кнопку очистки. Можно ли использовать изображение SVG вместо символа «x» по умолчанию?

Снимок экрана:

Answer 1

Я нашел другой способ сделать это, но в CSS. Вы можете добавить класс 'custom' к ng-select и изменить его стиль следующим образом:

<ng-select class="custom"></ng-select>

/* Hide default cross */
.ng-select.custom .ng-clear-wrapper .ng-clear {
  font-size: 0;
}

/* Display our image */
.ng-select.custom .ng-clear-wrapper .ng-clear::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('path/to/svg');
}

PS: если вы используете инкапсуляцию вида, ваши стили не будут применяться к ng- Выбрать. Чтобы избежать этого, добавьте encapsulation: ViewEncapsulation.None к метаданным компонента.

Answer 2

Очевидно, это еще не доступно в ng-select документов.

Но вы можете изменить его вручную с помощью другого значка после ng-select отображается.

Машинопись Пример:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements AfterViewInit {
    @ViewChild('ngSelect', { static: false }) public ngSelect: ElementRef;

    constructor() {
    }

    ngAfterViewInit() {
      setTimeout(() => {
        (this.ngSelect as any).element.querySelector('.ng-clear').innerHTML = '<i class="fa fa-code"></i>';
      }, 1);
    }
}

не забудьте добавить #ngSelect к элементу ng-select:

HTML Пример:

<ng-select #ngSelect>
</ng-select>