fix(appearance): apply styles correctly

closes #1422
ng-select · Nov 14, 2019 · e78818e · e78818e · mahendra-virtueinfo · Sep 20, 2021
1 parent af4c6bb
commit e78818e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/demo/app/examples/forms-with-options-example/forms-with-options-example.component.html b/src/demo/app/examples/forms-with-options-example/forms-with-options-example.component.html
@@ -2,7 +2,7 @@
     <div class="form-row">
         <div class="form-group col-md-6">
             <label for="yesno">Not searchable</label>
-            <ng-select #agreeSelect labelForId="yesno" [searchable]="false" formControlName="agree">
+            <ng-select appearance="outline" #agreeSelect labelForId="yesno" [searchable]="false" formControlName="agree">
                 <ng-option [value]="true">Yes</ng-option>
                 <ng-option [value]="false">No</ng-option>
             </ng-select>
@@ -11,7 +11,7 @@
         </div>
         <div class="form-group col-md-6">
             <label for="heroId">Basic select</label>
-            <ng-select [searchable]="false" [clearable]="false" labelForId="heroId" formControlName="heroId">
+            <ng-select appearance="outline" [searchable]="false" [clearable]="false" labelForId="heroId" formControlName="heroId">
                 <ng-option value="batman">
                     <img src="{{basePath}}/assets/batman.png" width="20px" height="20px"/>
                     Batman

diff --git a/src/ng-select/lib/ng-select.component.html b/src/ng-select/lib/ng-select.component.html
@@ -1,4 +1,9 @@
-<div (mousedown)="handleMousedown($event)" [class.ng-has-value]="hasValue" class="ng-select-container ng-appearance-{{appearance}}">
+<div
+    (mousedown)="handleMousedown($event)"
+    [class.ng-appearance-outline]="appearance === 'outline'"
+    [class.ng-has-value]="hasValue"
+    class="ng-select-container">
+
     <div class="ng-value-container">
         <div class="ng-placeholder">{{placeholder}}</div>