fix(igxGrid): Inject unique instances of the scroll sync service for IgxForOfDirective. Re-use same instances only when used in a Grid, where a common instance is injected in the Grid itself.

Author: MKirova

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -68,7 +68,8 @@ export class IgxForOfContext<T> {
 
 }
 
-@Directive({ selector: '[igxFor][igxForOf]' })
+@Directive({ selector: '[igxFor][igxForOf]',
+providers: [ IgxForOfScrollSyncService ] })
 export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestroy, AfterViewInit {
 
     /**

projects/igniteui-angular/src/lib/directives/for-of/for_of.sync.service.ts

@@ -48,9 +48,7 @@ export class IgxForOfSyncService {
     }
 }
 
-@Injectable({
-    providedIn: 'root',
-})
+@Injectable()
 export class IgxForOfScrollSyncService {
     private _masterScroll: Map<string, VirtualHelperBaseDirective> = new Map<string, any>();
     public setScrollMaster(dir: string, scroll: VirtualHelperBaseDirective) {