CODEWITHSUNDEEP
angularangular-materialmat-select
Lorenzo Bertolaccini
Lorenzo Bertolaccini

Reputation: 87

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

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>

Upvotes: 1

Views: 1880

Answers (1)

Anna
Anna

Reputation: 289

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
  }

Upvotes: 1

Related Questions