I'm trying to get file input work correctly. I have NewsComponent which basically shows the table of news. To add or edit news NewsComponent uses modal windows (alsoMDBootstrap component). For the modal content to not save state  and work properly with different news items I use ng-if directive for modal:

<div *ngIf="isEditModalShown" mdbModal #editItemForm="mdb-modal" [config]="{ show: true }" class="modal fade scrollable" tabindex="-1" role="dialog" aria-hidden="true" (onHidden)="onEditModalHidden()">

As I understand it creates or destroys modal component whenever ng-if condition changes. The same time NewsComponent is always alive during opening/closing modals. File input for adding new picture is naturally located in the modal while correspoinding typescript code is located in NewsComponent. When I open any modal for the first time, things go well. On the second opening I get the next error: NewsComponent.html:38 ERROR ObjectUnsubscribedError {name: "ObjectUnsubscribedError", stack: "ObjectUnsubscribedError: object unsubscribed↵ a…-internal:///../../../core/esm5/core.js:14929:76)", message: "object unsubscribed", ngDebugContext: DebugContext_, ngErrorLogger: ƒ} View_NewsComponent_2 @ NewsComponent.html:38 DebugContext_.logError @ core.js:14981 ErrorHandler.handleError @ core.js:1501 (anonymous) @ core.js:5898 ZoneDelegate.invoke @ zone.js:388 Zone.run @ zone.js:138 NgZone.runOutsideAngular @ core.js:4681 ApplicationRef.tick @ core.js:5898 (anonymous) @ core.js:5724 ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:4733 ZoneDelegate.invoke @ zone.js:387 Zone.run @ zone.js:138 NgZone.run @ core.js:4550 next @ core.js:5724 schedulerFn @ core.js:4319 SafeSubscriber.__tryOrUnsub @ Subscriber.js:240 SafeSubscriber.next @ Subscriber.js:187 Subscriber._next @ Subscriber.js:128 Subscriber.next @ Subscriber.js:92 Subject.next @ Subject.js:56 EventEmitter.emit @ core.js:4299 checkStable @ core.js:4698 onLeave @ core.js:4777 onInvokeTask @ core.js:4727 ZoneDelegate.invokeTask @ zone.js:420 Zone.runTask @ zone.js:188 ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1517 globalZoneAwareCallback @ zone.js:1543 I don't have any idea from what and how must I unsubscribe in the file input. I would prefer to use basic solution for file input because it works fine but I fail to customize its appearance using mdboostrap classes: html:

<div class="md-form form-sm">
  <input type='file' mdbFileSelect #fileInput (change)="readUrl($event)">
  <img [src]="url">
</div>

typescript:

url: string = "";
readUrl(event:any) {
  if(event.target.files&&event.target.files[0]) {
    var reader=newFileReader();
    reader.onload= (event:any) => {
      this.url=event.target.result;
      this._http.post('https://address...', event.target.result, this._getHeaders()).subscribe((r) => {
        alert("File added"+r);
      }, (r) => {
        alert("ERROR: file not added!"+r);
      });
    }
    reader.readAsDataURL(event.target.files[0]);
  }
}

So basically I need the following interface. An image button with "+" sign. When clicking file input dialog is shown, when file selected it replaces the image on button. So I don't need extra button, I don't need file list, I just need image which is blank when nothing is selected or filled with selected image. Clicking on image you can change selected file. How can achieve such interface using mdboostrap components or change default browser provided file input apperance using mdbootstrap classes?

---