Angular mat-select invisible until you click on it, how to set a default value

Question

I'm having tree issues related with making mat-selected work (please don't make me ask 3 questions since they are all related)

1. The control is not visible until I click on the empty space
2. No matter what I select the selected option is not showing (not keeping it)
3. Maybe first issue can be solved by having a default selected option

Ignore the red message below the button is just a reminder

When I click the empty space the select options appear.

After making a selection the control is in invalid mode

There are not any console/angular errors

Here is the component

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-game-round',
  templateUrl: './game-round.component.html',
  styleUrls: ['./game-round.component.css']
})
export class GameRoundComponent implements OnInit {
  moves : string[] = [];
  selectedMove: string = 'Rock';

  currentRoundInfo = new FormGroup({
    moves: new FormControl('', [Validators.required]),
  });
  constructor(
    private router:Router) { }

  ngOnInit(): void {
    this.backService.getGameMoves()
      .subscribe((data: string[]) => {
        this.moves = data;
        //this.currentRoundInfo.setValue({moves : data}) ;
        console.log(`getGameMoves:${this.moves}`);
      });
      
    //trying to set a defult value
      this.currentRoundInfo.setValue({
        moves: 'Paper'
      });

  }

  moveSelected(move: string) {
    console.log("moveSelected:" + move) ;
    this.selectedMove = move ;
  }

  onSubmit() {
    console.log("next") ;
    
  }
}

And here is the HTML

<div class="full-width-centered">
  <form [formGroup]="currentRoundInfo" (ngSubmit)="onSubmit()">
    <div class="full-width" >
      <mat-form-field floatLabel="never" appearance="outline">
        <mat-label>Select your move:</mat-label>
        <mat-select [(value)]="selectedMove" formControlName="moves" placeholder="test placeholder" (selectionChange)="moveSelected($event.value)">
          <mat-option  *ngFor="let m of moves" [value]="m">
            {{m}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <br>
    <div>
      <button type="submit">NEXT</button>
    </div>
  </form>
</div>

I found this other question for firt issue but no answer was provided.

mat-select doesn't display until i click on it

I have also tried many other similar answers with no luck (changing the floatlabel to always and setting a placeholder value)

Answer 1

You need to add a zone. A zone provides an execution context that persists across async tasks.

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

 

constructor(
    private router: Router,
    private zone: NgZone
) { }

 

this.backService.getGameMoves()
  .subscribe((data: string[]) => {
    this.zone.run(() => {
        this.moves = data;
    });
    //this.currentRoundInfo.setValue({moves : data}) ;
    console.log(`getGameMoves:${this.moves}`);
  });

This should work to fix your issue. I cannot test to verify since I don't have access to your service or a code playground link to test in, but I have tested in a similar scenario of my own.

Answer 2

It seems like angular-material default style for the select is not working so I decided to override it.

.mat-select {
    border: 1px solid lightseagreen !important ;
    background: lightseagreen;
    height: 30px !important;
}

Setting the default was working, but since select was invisible I could not see that

//Set de default value
this.currentRoundInfo.setValue({
    movesControl: 'rock' 
});

To keep the selected value just store in an component property and bind it to the select:

<mat-select [(value)]="selectedMove"

UPDATE : reinstalling angular/material and restarting ng serve also helped

So after more styling this is how it looks: