CODEWITHSUNDEEP
angularangular-ngselect
Karu
Karu

Reputation: 1005

ng select style group headers and items

I am using ng-select (https://ng-select.github.io/ng-select#/data-sources) library in my angular project to display a drop down as follows:

<ng-select
  [items]="flattenedSelectList"
  bindLabel="displayName"
  placeholder="Select specialty"
  notFoundText="No results found. Please try a different search criteria."
  bindValue="id"
  groupBy="type"
  [(ngModel)]="selectedSpecialtyId">
</ng-select>

I want to style the group header and also the items inside each group? How can I do it?

I used the following in my .scss file but it does not seem to apply the changes. ng-optgroup for group header and ng-option-label for item.

.ng-optgroup {
  font-weight: bold;
  color: #dbe8ef;
}

.ng-option-label{
  color: red;
}

Upvotes: 3

Views: 5525

Answers (1)

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

Use this style and add in core file style.css :

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{
  font-weight: bold;
  color: #dbe8ef;
}
.ng-option-label{
  color: red;
}

Stackblitz : https://stackblitz.com/edit/angular-ztb1ug

Upvotes: 6

Related Questions