mat-button click is not fired while alongside with ng-template

288 views Asked by At

I have the following code structure:

<div class="tile panel-container preview" *ngIf="dataSource?.length > 0">
  <ng-container *ngIf="uploadPercentage; then loadBlock; else successLoadBlock"></ng-container>
  <button mat-button class="btn" [disabled]="checkedColumns.size < 1 || task" (click)="uploadFile()">
    {{ 'UPLOADER.SEND_FILE' | translate }}
  </button>
</div> 

The problem is that when I click on the button the uploadFile() is not fired, as well as no errors raise in the console. I'm rather confused as I haven't faced such an issue before. Somehow when I rewrite the code like this it works.

<button mat-button class="btn" [disabled]="checkedColumns.size < 1 || task" (click)="uploadFile()">
    {{ 'UPLOADER.SEND_FILE' | translate }}
</button>
<div class="tile panel-container preview" *ngIf="dataSource?.length > 0">
    <ng-container *ngIf="uploadPercentage; then loadBlock; else successLoadBlock"></ng-container>
</div> 

Or if I just remove the ng-container part everything works just fine. But I need the button to be inside the container so I'm in stuck with it. Could anyone help, please?

0

There are 0 answers