Angular: ¿Cómo devuelvo todos los datos para el elemento seleccionado en mat-select en mat-dialog mientras mantengo el código para el valor predeterminado seleccionado?

Question

Tengo un cuadro de diálogo mat modal que completa una selección mat. El menú desplegable se rellena con idiomas. Estoy vinculando el (valor) a la ID del idioma para que pueda preseleccionarse con un valor predeterminado si se pasan datos al cuadro de diálogo. Sin embargo, me gustaría recuperar la "ID" y la "descripción del idioma" que se ven en el menú desplegable. ¿Hay alguna manera de completar ambos campos de datos al devolver los datos de un mat-select en mat-dialog-close? Entiendo por qué estoy recuperando "data.ID" y "data.translation", pero ¿cómo puedo completar la selección de "data.language"? Importante: el menú desplegable está preseleccionado con data.id cuando se ha seleccionado previamente un idioma, por lo que no desea perder la funcionalidad del valor predeterminado a menos que haya otra forma.

Gracias de antemano.

.html

<div mat-dialog-content class="fullwidth">
    <p>Select language to translate</p>
    <mat-form-field class="fullwidth">      
            <mat-label>Language</mat-label>
                <mat-select [(value)]="data.id">
                    <mat-option *ngFor="let langItem of languageList$;" [value]="langItem.value">            
                    {{langItem.description}}
                    </mat-option>
                </mat-select>
    </mat-form-field>
    
    <mat-form-field class="fullwidth">          
        <mat-label>Enter translation here</mat-label>
        <textarea class="textarea" matInput placeholder="Ex. Translation here..." [(ngModel)]="data.translation"></textarea>    
    </mat-form-field>

</div> <div mat-dialog-actions>   <button mat-stroked-button class="right" [mat-dialog-close]="data" cdkFocusInitial>Save</button>  </div>

.ts

    openTranslationDialog(event, elem): void {
        const dialogRef = this.translateDialog.open(TranslationModalComponent, {
          
          data: {id: String(this._transData?.id), language: this._transData?.language, translation: this._transData?.translation}
        });
        
        dialogRef.afterClosed().subscribe(result => {   
          console.log("Language Description: " + result.description);
          console.log("Language ID: " + result.id);  //only get ID back

});
}

json

{code: "1033", description: "Afrikaans", value: "100000001"}
{code: "1033", description: "Damara", value: "100000002"}
{code: "1033", description: "English", value: "100000000"}
{code: "1033", description: "German", value: "100000003"}
{code: "1033", description: "isiNdebele", value: "100000004"}
{code: "1033", description: "isiXhosa", value: "100000005"}
{code: "1033", description: "isiZulu", value: "100000006"}

Answer 1

es en [mat-dialog-close]donde indicas que valor quieres recibir en el "resultado" al suscribirte. Entonces puedes crear una función en tu TranslationModalComponent

getData() {
    const language = this.languageList$.find(
      x => x.value == (this.data as any).id
    );
    return { ...this.data, ...language };
  }

Y use

<button [mat-dialog-close]="getData()" ...>Save</button>

Answer 2

Última pieza de código que funcionó, gracias a @Eliseo

getData() {
  if ((this.languageService.languageList.length > 0) && ((this.data as any).id > 0))
  {    
    const language = this.languageList.find(
    x => x.value == (this.data as any).id
  );  
    if (language)
      return { id: language.value, language: language.description, translation: this.data.translation};
    else
      return { id: "", language: "", translation: ""};
  }  
}