Tengo un componente de diálogo que se muestra al hacer clic en un botón de "Editar" junto a un elemento de una tabla. El componente de diálogo se parece a esto por ahora:
<h1 mat-dialog-title>{{item.ID}}</h1>
<div mat-dialog-content>
<p>Edit item</p>
<mat-form-field appearance="outline" style="justify-content: center;">
<mat-label>ID</mat-label>
<input matInput [(ngModel)]="item.ID">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input matInput [(ngModel)]="item.Name">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Date</mat-label>
<input matInput [(ngModel)]="item.Date">
</mat-form-field>
</div>
<div mat-dialog-actions style="justify-content: center;">
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button [mat-dialog-close]="item.ID" cdkFocusInitial>Save</button>
</div>
Esto se ve y funciona muy bien, y sirve a su propósito. Pero ahora tengo varias otras tablas con los diferentes tipos de datos, y mientras yo pueda crear un cuadro de diálogo separado para cada tabla y agregar los campos de formulario manualmente para cada tipo, me gustaría tener una solución más flexible.
¿Cómo puedo crear un cuadro de diálogo donde los campos de formulario se agrega en función del elemento de referencia del tipo? E. g: Si tengo un objeto de tipo 'Fruta' en una tabla con propiedades como 'Nombre', 'Color', 'Precio', y un objeto de tipo 'Coche' con propiedades como el 'Nombre', 'Fabricado', 'Potencia', ¿puedo utilizar el mismo componente de diálogo y crear el formulario dinámicamente?