I have implemented a dialog window using Angular where it opens by passing a parameter in the HTML side along with a transaction. To further enhance the functionality of my page, I want to incorporate the fab button. However, I am facing a challenge in sending the parameters from the HTML side when calling the modal function on the TypeScript side. Can anyone assist me with this?
.html file((click)="editPdf(responsiveData)")
.... <!-- The part to be deleted -->
<button type="button" class="btn btn-outline-primary btn btn-sm dropdown-toggle mr-3" (click)="editPdf(responsiveData)"> <i class="fe-edit"></i></button>
...
<div>
<div id="fab-dismiss"
*ngIf="fabTogglerState==='active'"
(click)="onToggleFab()">
</div>
<div class="fab-container">
<button mat-fab class="fab-toggler"
(click)="onToggleFab()">
<i class="material-icons" [@fabToggler]="{value: fabTogglerState}">settings</i>
</button>
<div *ngFor="let btn of buttons" [@speedDialStagger]="buttons.length">
<button *ngIf="btn.show"
mat-mini-fab
class="fab-primary"
matTooltip="{{btn.tooltip}}"
matTooltipPosition="left"
color="accent"
(click)="onClickFab(btn)">
<i class="material-icons">{{btn.icon}}</i>
</button>
</div>
</div>
ResponsiveData content enter image description here
Typescript
...
FabOptions = {
buttons: []
}
buttons = [];
fabTogglerState = 'inactive';
fabButtons(ap: extendedAppeal) {
this.FabOptions = {
buttons: [
{
...
{
id: 9,
icon: 'create',
show: ((this.pdfguncelle) && (ap.status === this.appealStatus.Waiting) &&(this.authService.currentUser().agentOf.indexOf(ap.branchOfficeId) > -1)) ? true : false,
tooltip: "Dilekçe Düzenle"
},
...
]
};
}
showItems() {
this.fabTogglerState = 'active';
this.buttons = this.FabOptions.buttons;
}
hideItems() {
this.fabTogglerState = 'inactive';
this.buttons = [];
}
onToggleFab() {
this.buttons.length ? this.hideItems() : this.showItems();
}
onClickFab(btn) {
.../* Part to add */
//else if (btn.id === 9) this.editPdf() /* I have to change this line to open the dialog window */
}
editPdf(content: any) {
...
this.modalService.open(content, { centered: true });
}