Search code examples
cssangularangular-material2md-select

Angular2 md-select remove arrow after selecting option

I have a value selected from the md-select but the "arrow" from the md-select still shows after selection.

HTML

<div class="form-group spaces" style="width: 50%">
   <md-select placeholder="Claim Type"  name="selectedClaimType"   
       ngDefaultControl formControlName="selectedClaimType"  
       [(ngModel)]="selectedClaimType" [formControl]="claimType" >
          <md-option *ngFor="let c of ClaimTypes"                     
          [value]="c.ClaimTypeId">{{c.ClaimDescription}}</md-option>
   </md-select>

</div>

Tried amending the width through css in mat-select but to no avail.

Please see attached..any suggestions highly appreciated

Screenshot showing arrow

Adding rendered html code 

  <md-select class="mat-select ng-tns-c2-1 mat-primary ng-valid ng-dirty ng-
    touched" formcontrolname="selectedClaimType" name="selectedClaimType" 
    ngdefaultcontrol="" placeholder="Type" role="listbox" tabindex="0"
    aria-label="Claim Type" aria-labelledby="" aria-required="false" 
    aria-disabled="false" aria-invalid="false" aria-owns="md-option-0
    md-option-1 md-option-2">
    <div class="mat-select-trigger" cdk-overlay-origin="">
    <span class="mat-select-placeholder ng-trigger
     ng-trigger-transformPlaceholder mat-floating-placeholder" 
     style="opacity: 1; width: 99px; top: -22px; left: -2px; 
     transform: scale(0.75);">Type </span><!---->
    <span class="mat-select-value ng-tns-c2-1">
    <span class="mat-select-value-text">High Voltage Battery</span> </span>
    <span class="mat-select-arrow"></span> 
    <span class="mat-select-underline"></span></div><!---->
 </md-select>
Solution

  • As you can see in the rendered code, there's span that adds that dropdown arrow.

    <span class="mat-select-arrow"></span>

    So, my idea is to remove the class mat-select-arrow on selection or if selectedClaimType has a value on initialization.

    I created a reference of md-select using @ViewChild and use it to remove the class.

    Simplified example:

    html:

    <div class="form-group spaces" style="width: 50%">
   <md-select placeholder="Claim Type"  name="selectedClaimType"
              [(ngModel)]="selectedClaimType"
              #select (change)="removeArrow()">
          <md-option *ngFor="let c of ClaimTypes"                     
          [value]="c.ClaimTypeId">{{c.ClaimDescription}}</md-option>
   </md-select>
</div>

    ts:

    import {Component, ViewChild, OnInit } from '@angular/core';
import {MdSelect} from '@angular/material';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample implements OnInit{
  @ViewChild('select') select: MdSelect;

  ClaimTypes = [
    {ClaimTypeId: 'steak-0', ClaimDescription: 'Steak'},
    {ClaimTypeId: 'pizza-1', ClaimDescription: 'Pizza'},
    {ClaimTypeId: 'tacos-2', ClaimDescription: 'Tacos'}
  ];

  selectedClaimType;

  constructor(){
    this.selectedClaimType = this.ClaimTypes[0].ClaimTypeId;
  }

  ngOnInit(){
    if(this.selectedClaimType != undefined){
      this.select.trigger.nativeElement.children[1].classList = null;
    }
  }

  removeArrow(){
    if(this.select.trigger.nativeElement.children[2].className == 'mat-select-arrow'){
       this.select.trigger.nativeElement.children[2].classList = null;
    }
  }
}

    Plunker demo