I have a web application written in Angular4 using ngx-bootstrap. I need to call a file open dialog from a bootstrap dropdown menu. I have found a nice example here on how to make the HTML and CSS so the dropdown looks nice here: make input look and behave like a link in bootstrap dropdown
My HTML looks like this:
<li dropdown class="btn-group" container="body">
<a href dropdownToggle (click)="false" role="button" >Desktop <span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu">
<li role="menuitem" *ngFor="let desktop of desktops$ | async">
<a class="dropdown-item" routerLink="/{{desktop.$key}}">{{desktop.name}}</a>
</li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" (click)="childModal.show()" style="cursor:pointer;">New...</a>
<li role="menuitem"><a class="dropdown-item" href="#">Delete...</a>
<li role="menuitem"><a class="dropdown-item" href="#">Share...</a>
<li class="divider dropdown-divider"></li>
<li><a class="btn-file">
Add files...<input type="file" (change)="detectFiles($event)" style="cursor:pointer;" />
</a></li>
<!--<li role="menuitem"><a class="dropdown-item" routerLink="/add-files">Add files...</a>-->
<li role="menuitem"><a class="dropdown-item" href="#">Remove files...</a>
</ul>
</li>
To get the file the user selected I have added a (change)="detectFiles($event) to the input, but the function is newer called.
If I move the code:
<li><a class="btn-file">
Add files...<input type="file" (change)="detectFiles($event)" style="cursor:pointer;" />
</a></li>
out of the dropdown detectFiles is called as expected.
I found some articles about bootstrap stopping event propagation on dropdowns like this Twitter bootstrap stop propagation on dropdown open but I cannot really understand the suggested solutions and how they can be applied in an Angular app.
So how can I get the (change) event from within a bootstrap3 dropdown?
