Search code examples
angularbootstrap-4angular7

bs-custom-file-input not working with Angular

I'm trying to use bs-custom-file-input in an Angular (7) app but it's not working as expected. When a file is selected the file name is not being shown on the label as it's intended.

Where are the steps i've done to setup the module:

  1. Install the bs-custom-file-input:

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

  1. Import it to my component:

import bsCustomFileInput from 'bs-custom-file-input';

  1. Initialize the plugin:

    ngOnInit() { bsCustomFileInput.init(); }

  2. 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>

What am i missing here?

Solution

  • The Bootstrap documentation states that

    We hide the default file <input> via opacity and instead style the <label>.

    This means you will have to update the <label>'s innerHTML yourself when the value of the <input> field changes.

    This article by Alain Boudard provides code examples on how to make it work in angular.