How to take the current value of a select with angular

Question

import { MatchService } from './../match.service';
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core'
import { Match } from '../match.model';
import {FormControl, Validators} from '@angular/forms';
import { MatchCreateService } from './match-create.service';
import { templateSourceUrl } from '@angular/compiler';


@Component({
  selector: 'app-match-create',
  templateUrl: './match-create.component.html',
  styleUrls: ['./match-create.component.css']
})
export class MatchCreateComponent implements OnInit {

  
  teams: Team[] = [];

  selectedAwayTeam = this.teams[1];
  selectedHomeTeam = this.teams[0];
    match: Match = {
    homeTeam: '',
    awayTeam: '',
    goalsHomeTeam: 0,
    goalsAwayTeam: 0
  }
  /*logo: Blob[] = this.teams[1].logo;*/
  
  constructor(private matchService: MatchService, private router: Router,
     private matchCreateService: MatchCreateService) { }

  ngOnInit(): void {
   this.getTeams();
  }
 getTeams(){
  this.matchCreateService.getTeams().subscribe(teams => {
    console.log(teams[8].srcLogo);
    this.teams = teams; 
  })
}
createMatch(): void {
  this.matchService.create(this.match).subscribe(() => {
    this.matchService.showMessage('Partida criada com sucesso!')
    this.router.navigate(['/matches'])
  })
}

cancel(): void {
  this.router.navigate(['/matches']);
}

teste(elemento: any){
  console.log(elemento)

}

}

The first element selected comes Undefined, the second comes the first element I showed and so on

I would just like to pick up the selected element. I am using Angular 11

Answer 1

Good afternoon Ivo, all right? It’s even simple Just follow the steps below, any doubt I’m available.

Typescript (your Component.ts)

// variavel pra receber e enviar valor pro html
idTimeSelecionado: number = 0; 

// Lista com os times para o select
  listaTimes = [
    {
      nome: 'Atletico',
      id: '1',
      cidade: 'Belo Horizonte'
    },
    {
      nome: 'Corinthians',
      id: '2',
      cidade: 'São Paulo'
    }, 
    {
      nome: 'Flamengo',
      id: '3',
      cidade: 'Rio de Janeiro'
    },
  ];

Example of ng-select ( your Component.html)

<ng-select [items]="listaTimes " bindLabel="nome" 
bindValue="id" placeholder="Selecione o time desejado"
[(ngModel)]="idTimeSelecionado">
</ng-select>

In the select above I get a list of teams, where inside I have the properties id, name and city. To be able to access the value first I pass to the bindValue="name of the property you want to save in the variable, in my case I used the 'id' ", to the bindLabel="Description that the user will see to choose the option, in my case 'name' ", now in typescript I create a variable of type number with the name idMenuSelected, step this variable pro [(ngModel)].

Then it is simple to query the value selected by the user in typescript, use console to check selected value.

  console.log(this.idMenuSelecionado);