bs-custom-file-input не работает с Angular

Question

Я пытаюсь использовать bs-custom-file-input в приложении Angular (7), но оно не работает должным образом. Когда файл выбран, имя файла не отображается на этикетке, как предполагалось.

Где приведены шаги, которые я сделал для настройки модуля:

1. Установить bs-custom-file-input:

npm install bs-custom-file-input --save

2. Импортируйте его в мой компонент:

импорт bsCustomFileInput из 'bs-custom-file-input';

3. Инициализация плагина:

   ngOnInit () {bsCustomFileInput.init (); }

4. HTML:

<div class="custom-file">
  <input id="inputGroupFile01" type="file" class="custom-file-input">
  <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>

Что мне здесь не хватает?

Answer 1

Документация Bootstrap гласит, что

Мы скрываем файл по умолчанию <input> через непрозрачность и вместо этого используем стиль <label>.

Это означает, что вам придется самостоятельно обновлять <label> innerHTML при изменении значения поля <input>.

Эта статья Алена Бударда содержит примеры кода о том, как заставить его работать в угловом формате.