<mat-select-country> inside a Angular Material Table

[CJiwan]

HI, I try to shown the selected country in a Angular Material Table. In the HTML template of my componant I put :

<ng-container matColumnDef="country">
        <th mat-header-cell *matHeaderCellDef>Pays</th>
        <td mat-cell *matCellDef="let element"><mat-select-country [value]="element.country"></mat-select-country></td>
      </ng-container>

In the ts I read a list of customer from a db. With this list I create de datasource for the table :

this.customerList.forEach((customer, index)=>{
           let newCountry: Country ={
            alpha2Code: customer.country, alpha3Code: "", callingCode: "", name: "", numericCode: ""

          };
          tempList.push({
            position: index+1,
            name: customer.name,
            country: newCountry,
            language: customer.language.name
          });
          this.lastIndex = index+1;
 });
this.customersTable = tempList;

In my database, the country is the alpha2Code. The result is ;

If I replace the [value]="element.country" by [value]="defaultValue" and defaultValue is :

  defaultCountry: Country = {
    alpha2Code: "BE", alpha3Code: "", callingCode: "", name: "", numericCode: ""

  }

I obtain the correct result

But of course it is not what a need to do.

• OS:Windows 11
• Browser : Edge

• Version 109.0.1518.78 (Version officielle) (64 bits)

  Also tested with Chrome, the result is the same.

Thanks for your help

[Rogermax]

Hi,

Not sure if it's going to work, but you should send to the component an object similar to the defaultCountry, one way to achieve that could be:

<ng-container matColumnDef="country">
    <th mat-header-cell *matHeaderCellDef>Pays</th>
    <td mat-cell *matCellDef="let element">
        <mat-select-country [value]="{alpha2Code: element.country}"></mat-select-country>
    </td>
</ng-container>

Or:

<ng-container matColumnDef="country">
    <th mat-header-cell *matHeaderCellDef>Pays</th>
    <td mat-cell *matCellDef="let element">
        <mat-select-country [value]="{alpha2Code: element.country, alpha3Code: '', callingCode: '', name: '', numericCode: ''}"></mat-select-country>
    </td>
</ng-container>

Hope it helps you.

[CJiwan]

Hi, Unfortunately I get the same result. And no errors are generated in console which could have helped. Thanks Christian

[CJiwan]

Finaly that works. I prepare the entry of the datasource with :

let newEntry = {
        position: index+1,
        name: customer.name,
        country:{
          alpha2Code: customer.country, alpha3Code: "", callingCode: "", name: "", numericCode: ""
        },
        language: customer.language.name
};

in the HTML :

  <ng-container matColumnDef="country">
    <th mat-header-cell *matHeaderCellDef>Pays</th>
    <td mat-cell *matCellDef="let element"><mat-select-country [value]="element.country" [disabled]="true"></mat-select-country></td>
  </ng-container>

Thanks for your help