I want to update the field by clicking the submit from matdialog .
html
<h2>network <mat-icon (click)="openDialog(mytemplate)">add_circle_outline</mat-icon></h2>
<ng-template #mytemplate>
<div class="container">
<div class="box">
<mat-form-field appearance="outline">
<input matInput placeholder="enter the items" />
</mat-form-field>
<button mat-stroked-button mat-dialog-close color="accent">CANCEL</button>
<button mat-flat-button color="accent" (click)="onclick()">Submit</button>
</div>
</div>
</ng-template>
.ts
provider = [];
providers: provider;
getnetwork() {
this.service.getAllNetworkProviders().subscribe(res => {
this.provider = res.data;
this.dataSource = this.provider;
});
}
openDialog(template): void {
// ask user to confirm, if he really wants to proceed
this.dialogRef = this.dialog.open(template);
this.dialogRef.afterClosed().subscribe(isTrue => {
if (isTrue) {
const activatenetworkprovider = { networkName: this.providers.id };
this.service.networkProviderStatus(activatenetworkprovider).subscribe(data => {
this.getnetwork();
this.snackBar.open('Successfully created new network provider sim', 'Close', { duration: 2000 });
});
}
});
}
model.ts
export interface provider {
id: number;
name: string;
}
I'm getting error [ERROR TypeError: Cannot read properties of undefined (reading 'id') ].
I have updated the questions .
This is a declaration:
providers: provider;
It is not an actual object/instance, but rather just a handle to an object. You still need to assign something to this with =. Preferably an object that contains a member id (e.g.: { id: 1, ... }).
It is also convention to name interfaces with capital letters, like this:
export interface Provider {
id: number;
name: string;
}