Theming angular material autocomlete options

Discussão em 'Angular' iniciado por Murmulodi, Dezembro 15, 2024.

  1. Murmulodi

    Murmulodi Guest

    How to modify the active and hover background-color of an option for angular material component autocomplete?

    <form class="example-form">
    <mat-form-field class="example-full-width">
    <mat-label>Number</mat-label>
    <input type="text"
    placeholder="Pick one"
    aria-label="Number"
    matInput
    [formControl]="myControl"
    [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
    @for (option of options; track option) {
    <mat-option [value]="option">{{option}}</mat-option>
    }
    </mat-autocomplete>
    </mat-form-field>
    </form>


    How to apply a background-color (active, hover) for mat.option in theme.scss. For the full working example see StackBlitz.

    :root {
    @include mat.all-component-themes($theme);
    @include mat.option-color($theme???
    }

    Continue reading...

Compartilhe esta Página