Parse value from object in Angular template

Question

#object

[
    {
        "id": 1,
        "description": "1 - Gulf Coast"
    },
    {
        "id": 2,
        "description": "10 - West Great Lakes"
    },
    {
        "id": 3,
        "description": "11 - California"
    },
]

#html code

<mat-form-field appearance="fill" >
    <mat-label>Region</mat-label>
    <mat-select [(ngModel)]="territoryAssignmentFields.region" name="region">
        <mat-option *ngFor="let region of regions" [value]="region.id">{{ region.description }}</mat-option>
    </mat-select>
</mat-form-field>

How do we parse on the angular template that the value of mat-select option will be the id from the description object for example based on the object below the [value] should be:

1, 10, 11.

It should get the id or number from the description and then use it as [value] of mat-select option.

Can we parse that on the template? Thanks.

#tscode

getregion() {
  this.searchString = "";
  this._pickListService.getregion(this.accountId,this.searchString).subscribe(
    res => {
      this.regions = res.data;
      console.log(" this.regions",  this.regions) 
    },
    err => {
      console.log('Filtered Territory Assignments Region Error')
      console.log(err);
    }
  )
}

Answer 1

In subscribe event, with Array.map() to generate a new array with id:

1. Split description value by - sign.
2. Get the first value from (1).
3. Trim spacing from (2).
4. Cast to number type from (3).

this._pickListService
  .getregion(this.accountId, this.searchString)
  .subscribe(
    (res) => {
      let data: any[] = res.data.map((x: any) => {
        return {
          id: parseInt(x.description.split('-')[0].trim()),
          description: x.description
        };
      });

      this.regions = data;
      console.log(' this.regions', this.regions);
    },
    (err) => {
      console.log('Filtered Territory Assignments Region Error');
      console.log(err);
    }
  );

Sample Demo on StackBlitz