Programmatically set mat-select default option

Question

I have a component which repeats a set of elements based on a array called lstSinisDiaria in my Angular material project.

<div *ngFor="let linha of lstSinisDiaria" class="sinisDiaria">

<div class="sinistro">

    <p>

        {{linha.cd_letra_sinistro}}-{{linha.cd_local_contabil}}-{{linha.cd_ramo}}-{{linha.cd_sinistro}}

    </p>


</div>

<div class="tipoErro">

    <mat-form-field>

        <mat-select [(value)]={{linha.ds_tipo_erro}}>

            <mat-option *ngFor="let tipoErro of lstTipoErro" [value]="tipoErro.value">
                {{tipoErro.value}}
            </mat-option>

        </mat-select>

    </mat-form-field>       

</div>

As you can see, one element in particular is a mat-select, which is also built from a different, static list (lstTipoErro) inside the component:

import { Component, OnInit } from '@angular/core';

import { ListaSinistroDiariaService } from './lista-sinistro-diaria-service.service';

@Component({
  selector: 'app-lista-sinistro-diaria',
  templateUrl: './app-lista-sinistro-diaria.component.html',
  styleUrls: ['./app-lista-sinistro-diaria.component.css']
})
export class AppListaSinistroDiariaComponent implements OnInit {
  
  lstSinisDiaria : any[];

  lstTipoErro : any[] = [
    {value: 'ACSELX'},
    {value: 'BASE'},
    {value: 'CIR'},
    {value: 'CONTABIL'},
    {value: 'NÃO INFORMADO'},
    {value: 'ONLINE'},
    {value: 'REGRA'}
  ];

  lstSituacao : any[] = [
    {value: 'AGUARDANDO CIR'},
    {value: 'AGUARDANDO USUÁRIO'},
    {value: 'AGUARDANDO PAGTO'},
    {value: 'CONTABILIZADO'},
    {value: 'VERIFICANDO'},
    {value: 'AGUARDANDO ACSELX'}
  ];

  lstAnalista : any[] = [
    {value: 'FISCH'},
    {value: 'LEO'},
    {value: 'R. ABAMBRES'},
    {value: 'MARCIO'}
  ];
  
  constructor(private service : ListaSinistroDiariaService) {
    
    this.lstSinisDiaria = this.service.getLista();
  }

  ngOnInit(){

  }

}

Even though I am able to populate the mat-options with said list, I am stuck trying to set the default value of the mat-select element, to match the value returned by the array.

What I'm trying to do is set the default selected option for each repeating mat-select to be the same as the value returned by linha.ds_tipo_erro, which is a value within the original array.

Is there a way to do something like this <mat-select [(value)]={{linha.ds_tipo_erro}}>?

PS.: This is my first time asking something here, please let me know if more information is needed or if I forgot to write or format something.

I added the [angular-material] tag, to attract experts in that library. I also removed the word JSON in front of array, since you're dealing with JavaScript arrays; no JSON involved (JSON is a text format). On Stack Overflow, it's typical that others will edit your posts to make them the best that they can be. — Heretic Monkey

AlesD AlesD · Accepted Answer · 2020-11-03T23:07:00

If you want the value be connected to the value linha.ds_tipo_erro. The correct syntax for binding is this:

<mat-select [(value)]="linha.ds_tipo_erro">
   <mat-option *ngFor="let tipoErro of lstTipoErro" [value]="tipoErro.value">
      {{tipoErro.value}}
   </mat-option>
</mat-select>

This means that the value will be also updated back to the object when you change the selection since [(value)] is syntax for two way binding. If you want just to set the value once the first time then use [value]="linha.ds_tipo_erro".

Check the official Angular documentation on binding for more details this is not specific to material controls.

Programmatically set mat-select default option

1 Answers