CODEWITHSUNDEEP
cssangularangular-materialmaterial-design
asdf
asdf

Reputation: 667

Adding mat-divider to mat-select/mat-option

Is it possible to have a mat divider (a horizontal line seperating two mat-options)?

I have tried:

<mat-form-field>
  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <mat-divider></mat-divider>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
   </select>
</mat-form-field>

A bad workaround I have now is:

<mat-option>--------------------------</mat-option>

However this is not ideal.

Upvotes: 3

Views: 8138

Answers (4)

Eduardo Moreno
Eduardo Moreno

Reputation: 23

Angular material Select documentation provide you help for that, you can use the panelClass directive like the example they show: 

<mat-form-field>
  <mat-label>Panel color</mat-label>
  <mat-select [formControl]="panelColor"
              panelClass="example-panel-{{panelColor.value}}">//panelColor.value if you want to handle some class dynamically
    <mat-option value="red">Red</mat-option>
    <mat-option value="green">Green</mat-option>
    <mat-option value="blue">Blue</mat-option>
  </mat-select>
</mat-form-field>

and these are the css classes they handle 

.example-panel-red.mat-select-panel {
  background: rgba(255, 0, 0, 0.5);
}

.example-panel-green.mat-select-panel {
  background: rgba(0, 255, 0, 0.5);
}

.example-panel-blue.mat-select-panel {
  background: rgba(0, 0, 255, 0.5);
}

So, you can apply wentjun css properties in a class

Upvotes: 0

sda87
sda87

Reputation: 402

Yes, It is possible to add mat-divider to mat-select/mat-option

<mat-form-field>
  <mat-label> Cars </mat-label>
  <mat-select>
    <mat-option value="volvo"> Volvo </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="saab"> Saab </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="mercedes"> Mercedes </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="audi"> Audi </mat-option>
  </mat-select>

Hope it helps you

Upvotes: 3

nash11
nash11

Reputation: 8680

You can achieve this using mat-divider itself by just adding ng-container to wrap mat-option and mat-divider. Then use the last ngFor local variable to conditionally remove the mat-divider from the last mat-option.

<mat-select>
    <ng-container *ngFor="let food of foods; let last = last">
        <mat-option [value]="food.value">
            {{food.viewValue}}
        </mat-option>
        <mat-divider *ngIf="!last"></mat-divider>
    </ng-container>
</mat-select>

Here is a working example on StackBlitz.

Upvotes: 5

wentjun
wentjun

Reputation: 42556

I am not sure how exactly you want the divider to appear, but a pure CSS approach would be to overwrite the .mat-option class on your main styles.css, make use of the :after pseudo element, and add a value to the border-bottom CSS property.

.mat-option:after {
  content: '';
  width: 100%;
  border-bottom: solid 2px black;
  position: absolute;
  left: 0;
  z-index: 1;
  top: calc(3em - 2px);
}

I have created a demo over here.

Upvotes: 4

Related Questions