CODEWITHSUNDEEP
htmlangulartypescriptangular-materialfrontend
Ozzott
Ozzott

Reputation: 63

How to reset mat-select to initial state on click?

I'm using mat-select with mat-option but I want to reset the mat-option selected when I click on a button. So instead of just set its value to null, I want the option without value to be displayed on the screen.

Example:

<div ngIf="listAccounts">
  <mat-select [(value)]="accountSelected">
     <mat-option>Select an option... </mat-option>
     <mat-option [value]="account" *ngFor="let account of listOfAccounts" (click)="yourFunction(account)"> 
       Account {{account.accountNumber}} Agency {{account.agencyNumber}} Digit{{account.digitNumber}} 
     </mat-option>
</mat-select>
<div>
<button (click)="listedAccounts = !listedAccounts"> Button </button>

Everytime I click on the button I want to mat-option go to "Select an option..." or an empty option.

Upvotes: 0

Views: 1686

Answers (2)

Surya R Praveen
Surya R Praveen

Reputation: 3745

Add the initialvalue to empty on Reset button click with multi select dropdowns

HTML

          <mat-select
            placeholder="{{ generalAppSettings?.filterVariables?.regionText }}"
            (selectionChange)="onRegionChange($event)"
            class="dropdownFilters"
            *ngIf="generalAppSettings.filterVariables.showRegionFilter"
            [(value)]="regionValue"
          >
            <mat-option
              *ngFor="
                let option of generalAppSettings.filterVariables?.continents
              "
              [value]="option.region"
            >
              {{ option.region }}
            </mat-option>
          </mat-select>

          <mat-select
            placeholder="{{ generalAppSettings?.filterVariables?.countryText }}"
            (selectionChange)="onCountryChange($event)"
            class="dropdownFilters"
            *ngIf="generalAppSettings.filterVariables.showRegionFilter"
            [(value)]="initialCountryValue"
          >
            <mat-option *ngFor="let country of countryValue" [value]="country">
              {{ country }}
            </mat-option>
          </mat-select>

      <button
        class="btn btn--primary mat-button-cta"
        (click)="clearFilters()"
      >
        {{ generalAppSettings.filterVariables.resetInfo }}
      </button>

Typescript

clearFilters(): void {
    this.initialCountryValue = '';
    this.regionValue = '';
  }

Upvotes: 0

Mohit Sharma
Mohit Sharma

Reputation: 648

just set empty value to accountSelected and change in mat-option

<mat-option value=''>Select an option... </mat-option>

Upvotes: 1

Related Questions