Merge pull request #8717 from IgniteUI/simeonoff/fix-8714-10.2.x

fix(button-group): pass string to alignment prop

Author: simeonoff

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -24,8 +24,17 @@ import { IgxIconModule } from '../icon/public_api';
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { IBaseEventArgs } from '../core/utils';
+import { mkenum } from '../core/utils';
+
+/**
+ * Determines the Button Group alignment
+ */
+export const ButtonGroupAlignment = mkenum({
+    horizontal: 'horizontal',
+    vertical: 'vertical'
+});
+export type ButtonGroupAlignment = (typeof ButtonGroupAlignment)[keyof typeof ButtonGroupAlignment];
 
-export enum ButtonGroupAlignment { horizontal, vertical }
 let NEXT_ID = 0;
 
 /**

src/app/buttonGroup/buttonGroup.sample.html

@@ -20,7 +20,7 @@ <h4 class="sample-title">Multiple Selection <i class="light">Horizontal Disabled
 
     <article class="sample-column">
         <h4 class="sample-title">Exclusive Selection <i class="light">Vertical</i></h4>
-        <igx-buttongroup [multiSelection]="false" [values]="cities" [alignment]="alignment">
+        <igx-buttongroup [multiSelection]="false" [values]="cities" alignment="vertical">
         </igx-buttongroup>
     </article>