In my app, I have a mat-form-field with a mat- option. I want a dialog to open when I select an element from the mat-option. Here is my code. Right now, when I select an element, nothing happens. What should I do?
HTML:
<ng-container matColumnDef="Order">
<th mat-header-cell *matHeaderCellDef width="10%"> Sipariş No </th>
<td mat-cell *matCellDef="let row; let i = index">
<span *ngIf="EditIndex != i">{{row.Order?.Subject}}</span>
<mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p" style="min-width: 100px !important;">
<mat-select [(ngModel)]="row.Order" required name="Order"
(selectionChange)="updateProducts($event.value)" style="min-width: 100px !important;">
<mat-select-trigger>
{{row?.Order?.Reference}}
</mat-select-trigger>
<mat-option *ngFor="let order of originalSupplierOrders" [value]="order">
{{order.Reference + ' - ' + order.Subject}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
TS:
openSelectedOrderProductList(prm) {
const dialogRef = this._dialog.open(SelectedOrderProductListDialogComponent, {
width: "700px",
data: prm,
});
dialogRef.afterClosed().subscribe((result) => {
//console.log(result);
});
}
You need to trigger the selectionChange in to open the dialog. Add the "openSelectedOrderProductListfunction()" to (selectionChange).
HTML:
<ng-container matColumnDef="Order">
<th mat-header-cell *matHeaderCellDef width="10%"> Sipariş No </th>
<td mat-cell *matCellDef="let row; let i = index">
<span *ngIf="EditIndex != i">{{row.Order?.Subject}}</span>
<mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p" style="min-width: 100px !important;">
<mat-select [(ngModel)]="row.Order" required name="Order"
(selectionChange)="updateProducts($event.value);openSelectedOrderProductListfunction()" style="min-width: 100px !important;">
<mat-select-trigger>
{{row?.Order?.Reference}}
</mat-select-trigger>
<mat-option *ngFor="let order of originalSupplierOrders" [value]="order">
{{order.Reference + ' - ' + order.Subject}}
</mat-option>
</mat-select>
</mat-form-field>
</td>