fix: Remove circular dep between checkbox and list component (#3519)

SAP · Oct 1, 2020 · b913ddb · b913ddb
1 parent 0bad0b9
commit b913ddb
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/libs/core/src/lib/checkbox/checkbox/checkbox.component.ts b/libs/core/src/lib/checkbox/checkbox/checkbox.component.ts
@@ -6,6 +6,7 @@ import {
     ElementRef,
     forwardRef,
     HostBinding,
+    Inject,
     Input,
     Optional,
     ViewChild,
@@ -14,8 +15,8 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FdCheckboxValues } from './fd-checkbox-values.interface';
 import { compareObjects, KeyUtil } from '../../utils/public_api';
-import { ListItemComponent } from '../../list/list-item/list-item.component';
 import { Platform } from '@angular/cdk/platform';
+import { LIST_ITEM_COMPONENT, ListItemInterface } from '../../list/list-item/list-item-utils';
 
 let checkboxUniqueId = 0;
 
@@ -128,7 +129,7 @@ export class CheckboxComponent implements ControlValueAccessor {
         @Attribute('tabIndexValue') public tabIndexValue: number = 0,
         private _platform: Platform,
         private _changeDetectorRef: ChangeDetectorRef,
-        @Optional() private _listItemComponent: ListItemComponent
+        @Optional() @Inject(LIST_ITEM_COMPONENT) private _listItemComponent: ListItemInterface
     ) {
         this.tabIndexValue = tabIndexValue;
     }

diff --git a/libs/core/src/lib/list/list-item/list-item-utils.ts b/libs/core/src/lib/list/list-item/list-item-utils.ts
@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+export const LIST_ITEM_COMPONENT = new InjectionToken<string[]>('ListItemComponent');
+
+export interface ListItemInterface {
+    selected: boolean;
+}
diff --git a/libs/core/src/lib/list/list-item/list-item.component.ts b/libs/core/src/lib/list/list-item/list-item.component.ts
@@ -7,6 +7,7 @@ import {
     ContentChildren,
     ElementRef,
     EventEmitter,
+    forwardRef,
     HostBinding,
     HostListener,
     Input,
@@ -22,6 +23,7 @@ import { Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 import { KeyboardSupportItemInterface } from '../../utils/interfaces/keyboard-support-item.interface';
 import { KeyUtil } from '../../utils/functions/key-util';
+import { LIST_ITEM_COMPONENT, ListItemInterface } from './list-item-utils';
 
 /**
  * The component that represents a list item.
@@ -35,10 +37,11 @@ import { KeyUtil } from '../../utils/functions/key-util';
         class: 'fd-list__item',
         role: 'listitem'
     },
+    providers: [{ provide: LIST_ITEM_COMPONENT, useExisting: forwardRef(() => ListItemComponent) }],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None
 })
-export class ListItemComponent implements KeyboardSupportItemInterface, AfterContentInit, OnDestroy {
+export class ListItemComponent implements KeyboardSupportItemInterface, AfterContentInit, OnDestroy, ListItemInterface {
     /** Whether list item is selected */
     @Input()
     @HostBinding('attr.aria-selected')

diff --git a/libs/core/src/lib/list/public_api.ts b/libs/core/src/lib/list/public_api.ts
@@ -1,5 +1,6 @@
 export * from './list.module';
 export * from './list-item/list-item.component';
+export * from './list-item/list-item-utils';
 export * from './list-message.directive';
 export * from './directives/list-footer.directive';
 export * from './directives/list-group-header.directive';