Change input control for select ionic angular

user_16090212 0
Viewed 78

I'm new in ionic angular, so I have a table where I use a select as:

         <ion-row>
                <ion-col size="3">
                  <mat-form-field appearance="fill">
                    <mat-label>Per page</mat-label>
                    <select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
                      <option value="10">10</option>
                      <option value="20">20</option>
                      <option value="30">30</option>
                      <option value="40">40</option>
                    </select>
                  </mat-form-field>
                </ion-col>
              </ion-row>

So it shows something like:

enter image description here

As you can see it has an arrow down. I want this same arrow on input, my current input:

<ion-col size="4" class="ion-text-left">
                  <p class="filter__title">Company</p>
                    <mat-form-field class="mat-form-control form_control-adjust">
                      <input #clientInput (keyup)="(0)"  [matAutocomplete]="auto" [formControl]="company" matInput [(ngModel)]="selectedCompany"/>
                      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='loadContacts($event.option.value)'>
                        <mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
                          <table class="autocomplete-table">
                            <tr>
                              <td class="text-crol" style="width: 20px">
                                {{ client.name }}
                              </td>
                            </tr>
                          </table>
                        </mat-option>
                      </mat-autocomplete>
                    </mat-form-field>
                  </ion-col>

enter image description here

Is it possible to change the input for select in order to show arrow-down?

As Chiranjaya Denuwan comment bellow I changed it to:

 <ion-col size="4" class="ion-text-left">
                    <p class="filter__title">Company</p>
                    <mat-form-field class="mat-form-control form_control-adjust">
                      <mat-select  class="custom-dropdown">
                        <mat-option  (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
                          <table class="autocomplete-table">
                            <tr>
                              <td class="text-crol" style="width: 20px">
                                {{ client.name }}
                              </td>
                            </tr>
                          </table>
                        </mat-option>
                      </mat-select>
                    </mat-form-field>

It is showing as I want, problem is not changing table on selection change, I think is because I missing <mat-autocomplete> that I have on my original input, but when I try to add, it just does not load any option in select

ionic-framework angular html
1 Answers

Here you can use Angular material select.

input a class attribute into the mat-select

<mat-form-field appearance="fill">
      <mat-label>Favorite food</mat-label>
      <mat-select class="custom-dropdown">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
</mat-form-field>

then CSS ,

.custom-dropdown ::ng-deep.mat-select-arrow-wrapper {
  visibility: hidden;
}
user_110010030
Related