Set a mat-select default value only if just one value is present

Question

I have a mat-select in my angular project, which takes values from a server and shows them. What I need to do is to make sure that, in case the value received is exactly 1, to show it as a default value, but only in that case since the values aren't predetermined. Is there a way to do that?

HTML:

    <div class="combo">
    <div>
        <mat-form-field appearance="outline" class="calendarfilter">
            <mat-label>Utente</mat-label>
            <mat-select (selectionChange)="filteredUsers.emit($event.value)" [value]="null">
              <mat-option *ngFor="let user of users" [value]="user.id">
                {{user.descrizione}}
              </mat-option>
            </mat-select>
          </mat-form-field>
    </div>
    </div>

TS:

        import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
    import { UtentiAgenda } from 'src/app/models/EventoServer';
    
    @Component({
      selector: 'app-user-filter',
      templateUrl: './user-filter.component.html',
      styleUrls: ['./user-filter.component.css']
    })
    export class UserFilterComponent implements OnInit {
      @Input() users: UtentiAgenda[]
      @Output() filteredUsers: EventEmitter<number>= new EventEmitter()
      constructor() { }
    
      ngOnInit(): void { 
      }
    
    }

HTML in the home component:

    <app-user-filter class="filterbar" *ngIf="release=='wincar' && userAgenda != null" [users]="userAgenda" (filteredUsers)="userChanged($event)">
        </app-user-filter>

@SavanPadaliya FormsModule (I think, I didn't declare it in the beginning, I got assigned to the project while it was still way on his development. In app module says FormsModule) — Lorenzo Bertolaccini, Sep 13 '21 at 10:30
Yes but we got 2 types of forms Reactive and Template driven. First select any one and after that when ever form is initialised or you got data of dropdown you can directly assign that value to that dropdown. — Savan Padaliya, Sep 13 '21 at 11:40
https://stackoverflow.com/questions/60219681/angular-material-8-formcontrolname-error-getting-conflicting-messages/60219905#:~:text=That%20is%20because%20you%20are%20using%20template-driven%20and%20reactive%20form%20at%20the%20same%20time.%20You%20need%20to%20use%20it%20one%20of%20them%2C%20you%20cant%20use%20both%20at%20same%20time. — Savan Padaliya, Sep 14 '21 at 05:27

score 1 · Answer 1 · edited Sep 13 '21 at 15:49

1

Just add <mat-select (selectionChange)="filteredUsers.emit($event.value)" [(value)]="selectedValue">

and set the selectedValue in your ts inside an if condition like

if(this.users.length === 1){
    this.selectedValue = this.users.descrizione; //or according to your users structure
  }

edited Sep 13 '21 at 15:49

Dharman

30,962
25
85
135

answered Sep 13 '21 at 15:43

Anna

259
1
6

Set a mat-select default value only if just one value is present

1 Answers1