Ng-select style issue

Question

After install ng-select with :

npm install --save @ng-select/ng-select

I'm importing the material style to styles.scss with :

@import "~@ng-select/ng-select/themes/material.theme.css";

body {

But after all, the component is being presented with a very strange appearance.

Lookin at node_modules folder I can't see the ng-select folder to look at it's themes folder.

Any ideas please ?

Did it but with no results. The font is something like courier and the component caption is too small. — GCoe
– GCoe, Commented Oct 16, 2018 at 1:13
@GCoe Can you show your view code? That looks like a multi-select box. — Avin Kavish
– Avin Kavish, Commented Oct 16, 2018 at 1:23
Shure @AvinKavish : <ng-select [(ngModel)]="talhoesSelecionados" (change)="resetarRegistrosDeProducaoSelecionados()" [items]="talhoes" [multiple]="true" [closeOnSelect]="false" bindLabel="DescricaoDoTalhao" bindValue="CodigoDoTalhao" placeholder="Selecione o talhão" [(ngModel)]="talhoesSelecionados"> </ng-select> — GCoe
– GCoe, Commented Oct 16, 2018 at 1:29

GCoe · Accepted Answer · 2018-10-16 18:31:38Z

11

Solved with :

@import "~@ng-select/ng-select/themes/material.theme.css"; at styles.css

and

style="font-family: roboto" at the ng-select tag

answered Oct 16, 2018 at 18:31

GCoe

8854 gold badges15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Is it like this: ng-select {style = "font-family: roboto"}

Mathulan · Accepted Answer · 2022-02-07 04:25:12Z

3

In Angular 13 Add this code in your angular.json styles block :

       "styles": [
         ....
         ....
          "node_modules/@ng-select/ng-select/themes/default.theme.css",
        ],

answered Feb 7, 2022 at 4:25

Mathulan

3361 silver badge7 bronze badges