I have a modal that opens from the table within the material tab
Below is the HTML code for the Modal:
<div
bsModal
#createOrEditModal="bs-modal"
class="modal fade"
tabindex="-1"
role="dialog"
aria-labelledby="createOrEditModal"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form
*ngIf="active"
#landlordPropertyPortfolioForm="ngForm"
novalidate
(ngSubmit)="saveWithReason()"
autocomplete="off"
>
<div class="modal-header">
<h4 class="modal-title">
<span *ngIf="landlordPropertyPortfolio.id">{{ l("EditLandlordPropertyPortfolio") }}</span>
<span *ngIf="!landlordPropertyPortfolio.id">{{ l("CreateNewLandlordPropertyPortfolio") }}</span>
</h4>
<button type="button" class="close" (click)="close()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div *ngIf="!isNew" class="form-group">
<label for="LandlordPropertyPortfolio_Name">{{ l("Id") }}</label>
<input
type="text"
id="LandlordPropertyPortfolio_Id"
class="form-control"
[(ngModel)]="landlordPropertyPortfolio.id"
name="Id"
readonly
/>
</div>
<div class="form-group">
<label for="LandlordPropertyPortfolio_Name">{{ l("Name") }}</label>
<input
type="text"
id="LandlordPropertyPortfolio_Name"
class="form-control"
[(ngModel)]="landlordPropertyPortfolio.name"
name="Name"
maxlength="0"
minlength="255"
required
/>
</div>
</div>
<div class="modal-footer">
<button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
{{ l("Cancel") }}
</button>
<button
type="submit"
class="btn btn-primary blue"
[disabled]="!landlordPropertyPortfolioForm.form.valid"
[buttonBusy]="saving"
[busyText]="l('SavingWithThreeDot')"
>
<i class="fa fa-save"></i> <span>{{ l("Save") }}</span>
</button>
</div>
</form>
</div>
</div>
</div>
<change-reason-modal
#changeReasonModal
[dtoModel]="landlordPropertyPortfolio"
(save)="save()"
(close)="onChangeReasonModalClose()"
>
</change-reason-modal>
The modal opens from a component where there are tabs present.
Here is the code of a generic component with tabs:
<div *ngIf="tabTemplates" class="row-fluid align-items-center margin-top-20 w-100">
<mat-tab-group style="width: 100%;">
<mat-tab *ngFor="let tabTemplate of tabTemplates" label="{{ tabTemplate.title }}">
<ng-container *ngTemplateOutlet="tabTemplate.template"></ng-container>
</mat-tab>
</mat-tab-group>
</div>
I am currently using Angular Material tabs, whereas previously I used tabset (as seen in the commented-out code). Now, I am facing an issue with the modal background not being clickable. How can I resolve this?