Merge branch 'master' into fix-#5418-8.1.x

mpavlinov · web-flow · commit 3e95cde38a14 · 2019-07-17T17:17:28.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,8 @@ All notable changes for each version of this project will be documented in this
     - Replaces the current paginator in all grids. Can be used as a standalone component.
 - `IgxCombo`
     - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays.
+- `IgxForOf` now offers usage of local variables `even`, `odd`, `first` and `last` to help with the distinction of the currently iterated element.
+
 
 ## 8.0.2
 - `igx-list-theme` now have some new parameters for styling.
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts
@@ -1086,6 +1086,46 @@ describe('IgxForOf directive -', () => {
             expect(children.length).toEqual(expectedElementsLength);
         });
     });
+    describe('even odd first last functions', () => {
+        configureTestSuite();
+        let fix: ComponentFixture<LocalVariablesComponent>;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    TestIgxForOfDirective,
+                    LocalVariablesComponent
+                ],
+                imports: [IgxForOfModule]
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fix = TestBed.createComponent(LocalVariablesComponent);
+            fix.detectChanges();
+        });
+
+        it('should differentiate even odd items', () => {
+            const allItems: DebugElement[] = fix.debugElement.queryAll(By.css('igx-display-container'))[0].children;
+            expect(allItems.length).toEqual(100);
+            for (let i = 0; i < allItems.length; i++) {
+                if (i === 0) {
+                    expect(allItems[i].classes['first']).toBe(true);
+                }
+                if (i === allItems.length - 1) {
+                    expect(allItems[i].classes['last']).toBe(true);
+                }
+                if (i % 2 === 0) {
+                    expect(allItems[i].classes['even']).toBe(true);
+                } else {
+                    expect(allItems[i].classes['odd']).toBe(true);
+                }
+            }
+        });
+
+
+    });
+
 });
 
 class DataGenerator {
@@ -1574,3 +1614,40 @@ export class NoWidthAndHeightComponent {
         }
     }
 }
+
+@Component({
+    template: `
+    <div class='container'>
+        <ng-template igxFor let-item [igxForOf]="data" #virtDirVertical
+            [igxForScrollOrientation]="'vertical'"
+            [igxForContainerSize]='"500px"'
+            [igxForItemSize]='itemSize'
+            let-rowIndex="index"
+            let-odd="odd"
+            let-even="even"
+            let-first="first"
+            let-last="last">
+
+            <div #markupItem
+                [ngClass]="{
+                    first: first,
+                    last: last,
+                    even: even,
+                    odd: odd
+                }"
+                [style.height]='itemSize'>
+                    {{rowIndex}} : {{item.text}}
+            </div>
+        </ng-template>
+    </div>
+    `,
+})
+export class LocalVariablesComponent {
+    public data = [];
+
+    constructor() {
+        for (let i = 0; i < 100; i++) {
+            this.data.push({text: i + ''});
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
@@ -31,6 +31,38 @@ import { VirtualHelperComponent } from './virtual.helper.component';
 import { IgxScrollInertiaModule } from './../scroll-inertia/scroll_inertia.directive';
 import { IgxForOfSyncService } from './for_of.sync.service';
 
+/**
+ *  @publicApi
+ */
+export class IgxForOfContext<T> {
+    constructor(
+       public $implicit: T,
+       public index: number,
+       public count: number
+    ) {}
+
+    /**
+     * A function that returns whether the element is the first or not
+     */
+    get first(): boolean { return this.index === 0; }
+
+    /**
+     * A function that returns whether the element is the last or not
+     */
+    get last(): boolean { return this.index === this.count - 1; }
+
+    /**
+     * A function that returns whether the element is even or not
+     */
+    get even(): boolean { return this.index % 2 === 0; }
+
+    /**
+     * A function that returns whether the element is odd or not
+     */
+    get odd(): boolean { return !this.even; }
+
+}
+
 @Directive({ selector: '[igxFor][igxForOf]' })
 export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestroy {
 
@@ -323,7 +355,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 const input = this.igxForOf[i];
                 const embeddedView = this.dc.instance._vcr.createEmbeddedView(
                     this._template,
-                    { $implicit: input, index: this.igxForOf.indexOf(input) }
+                    new IgxForOfContext<T>(input, this.getContextIndex(input), this.igxForOf.length)
                 );
                 this._embeddedViews.push(embeddedView);
             }
@@ -789,6 +821,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             const cntx = embView.context;
             cntx.$implicit = input;
             cntx.index = this.getContextIndex(input);
+            cntx.count = this.igxForOf.length;
             const view: ViewRef = this.dc.instance._vcr.detach(0);
             this.dc.instance._vcr.insert(view);
             this._embeddedViews.push(embView);
@@ -832,6 +865,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             const cntx = (embView as EmbeddedViewRef<any>).context;
             cntx.$implicit = input;
             cntx.index = this.getContextIndex(input);
+            cntx.count = this.igxForOf.length;
         }
     }
 
@@ -903,6 +937,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 const cntx = (embView as EmbeddedViewRef<any>).context;
                 cntx.$implicit = input;
                 cntx.index = this.getContextIndex(input);
+                cntx.count = this.igxForOf.length;
             }
             this.dc.changeDetectorRef.detectChanges();
             if (prevChunkSize !== this.state.chunkSize) {
@@ -1165,7 +1200,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         const input = this.igxForOf[elemIndex];
         const embeddedView = this.dc.instance._vcr.createEmbeddedView(
             this._template,
-            { $implicit: input, index: elemIndex }
+            new IgxForOfContext<T>(input, this.getContextIndex(input), this.igxForOf.length)
         );
 
         this._embeddedViews.push(embeddedView);
@@ -1516,7 +1551,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         const input = this.igxForOf[elemIndex];
         const embeddedView = this.dc.instance._vcr.createEmbeddedView(
             this._template,
-            { $implicit: input, index: elemIndex }
+            new IgxForOfContext<T>(input, this.getContextIndex(input), this.igxForOf.length)
         );
 
         this._embeddedViews.push(embeddedView);
@@ -1550,6 +1585,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
                 const cntx = (embView as EmbeddedViewRef<any>).context;
                 cntx.$implicit = input;
                 cntx.index = this.getContextIndex(input);
+                cntx.count = this.igxForOf.length;
             }
             if (prevChunkSize !== this.state.chunkSize) {
                 this.onChunkLoad.emit(this.state);
diff --git a/src/app/virtual-for-directive/virtual-for.sample.css b/src/app/virtual-for-directive/virtual-for.sample.css
@@ -5,3 +5,4 @@
     position: relative;
     overflow: hidden;
 }
+.even { background-color: #1f1f1f; }
diff --git a/src/app/virtual-for-directive/virtual-for.sample.html b/src/app/virtual-for-directive/virtual-for.sample.html
@@ -1,74 +1,87 @@
 <div class="list-sample">
     <article class="sample-column">
-            <span>Vertical Virtualization</span>
-            <br/>
-            <div style='height:500px; position: relative; overflow: hidden'>
-              <ng-template igxFor let-item [igxForOf]="data" #virtDirVertical
-                [igxForScrollOrientation]="'vertical'"
-                [igxForContainerSize]='"500px"'
-                [igxForItemSize]='itemSize'
-                let-rowIndex="index">
-                <div [style.height]='itemSize'>{{rowIndex}} : {{item.text}}</div>
-                </ng-template>
-            </div>
-            <button (click)="scrNextRow()">Scroll Next Row</button>
-            <button (click)="scrPrevRow()">Scroll Prev Row</button>
-            <button (click)="scrNextPage()">Scroll Next Page</button>
-            <button (click)="scrPrevPage()">Scroll Prev Page</button>
-            <div><input type='number' #input/><button (click)='scrScrollTo(input.value)'>Go To Index</button></div>
-            <button (click)="verticalVisibleItemCount()">Get visible item count</button>
-            <button (click)="changeItemSize()">Change Item Size</button>
+        <span>Vertical Virtualization</span>
+        <br/>
+        <div style='height:500px; position: relative; overflow: hidden'>
+            <ng-template igxFor let-item [igxForOf]="data" #virtDirVertical
+            [igxForScrollOrientation]="'vertical'"
+            [igxForContainerSize]='"500px"'
+            [igxForItemSize]='itemSize'
+            let-rowIndex="index">
+            <div [style.height]='itemSize'>{{rowIndex}} : {{item.text}}</div>
+            </ng-template>
+        </div>
+        <button (click)="scrNextRow()">Scroll Next Row</button>
+        <button (click)="scrPrevRow()">Scroll Prev Row</button>
+        <button (click)="scrNextPage()">Scroll Next Page</button>
+        <button (click)="scrPrevPage()">Scroll Prev Page</button>
+        <div><input type='number' #input/><button (click)='scrScrollTo(input.value)'>Go To Index</button></div>
+        <button (click)="verticalVisibleItemCount()">Get visible item count</button>
+        <button (click)="changeItemSize()">Change Item Size</button>
     </article>
     <article class="sample-column">
-            <span>Horizontal Virtualization</span>
-            <br/>
-            <table>
-                <tbody style='display:grid;'>
-                <tr style='width:500px; height:100px;'>
-                    <div class='overflowContainer'>
-                        <ng-template igxFor let-item [igxForOf]="data" #virtDirHorizontal
-                            [igxForScrollOrientation]="'horizontal'"
-                            [igxForContainerSize]='"500px"'
-                            [igxForItemSize]='"200px"'
-                            let-rowIndex="index">
-                                <td  [style.width.px]='200' [style.min-width.px]='200' style='height:100px;'>{{rowIndex}} : {{item.text}}</td>
-                        </ng-template>
-                    </div>
-                </tr>
-                </tbody>
-            </table>
-            <br/>
-            <button (click)="scrNextCol()">Scroll Next Column</button>
-            <button (click)="scrPrevCol()">Scroll Prev Column</button>
-            <button (click)="scrNextHorizontalPage()">Scroll Next Horizontal Page</button>
-            <button (click)="scrPrevHorizontalPage()">Scroll Prev Horizontal Page</button>
-            <input (input)="scrHorizontalScrollTo($event.target.value)" placeholder="scroll to index"/>
-            <button (click)="horizontalVisibleItemCount()">Get visible item count</button>
+        <span>Horizontal Virtualization</span>
+        <br/>
+        <table>
+            <tbody style='display:grid;'>
+            <tr style='width:500px; height:100px;'>
+                <div style='position: relative; overflow: hidden'>
+                    <ng-template igxFor let-item [igxForOf]="data" #virtDirHorizontal
+                        [igxForScrollOrientation]="'horizontal'"
+                        [igxForContainerSize]='"500px"'
+                        let-rowIndex="index">
+                            <td [style.width.px]='item.width' [style.min-width.px]='item.width' style='height:100px;'>{{rowIndex}} : {{item.text}}</td>
+                    </ng-template>
+                </div>
+            </tr>
+            </tbody>
+        </table>
+        <button (click)="scrNextCol()">Scroll Next Column</button>
+        <button (click)="scrPrevCol()">Scroll Prev Column</button>
+        <button (click)="scrNextHorizontalPage()">Scroll Next Horizontal Page</button>
+        <button (click)="scrPrevHorizontalPage()">Scroll Prev Horizontal Page</button>
+        <input (input)="scrHorizontalScrollTo($event.target.value)" placeholder="scroll to index"/>
+        <button (click)="horizontalVisibleItemCount()">Get visible item count</button>
     </article>
     <article class="sample-column">
         <span>Variable heights</span>
         <br/>
         <div style='height:500px; position: relative; overflow: hidden'>
-              <ng-template igxFor let-item [igxForOf]="data" #virtDirVariableVertical [igxForTrackBy]='trackByKey'
-                [igxForScrollOrientation]="'vertical'"
-                [igxForContainerSize]='"500px"'
-                [igxForItemSize]='"100px"'
-                let-rowIndex="index">
-                <div [style.height.px]='item.height'>{{rowIndex}} : {{item.text}}</div>
-                </ng-template>
-            </div>
-</article>
+            <ng-template igxFor let-item [igxForOf]="data" #virtDirVariableVertical [igxForTrackBy]='trackByKey'
+            [igxForScrollOrientation]="'vertical'"
+            [igxForContainerSize]='"500px"'
+            [igxForItemSize]='"100px"'
+            let-rowIndex="index">
+            <div [style.height.px]='item.height'>{{rowIndex}} : {{item.text}}</div>
+            </ng-template>
+        </div>
+    </article>
+    <article class="sample-column">
+        <span><i>Even</i> variable</span>
+        <br/>
+        <div style='height:500px; position: relative; overflow: hidden'>
+          <ng-template igxFor let-item [igxForOf]="data" #virtDirVertical
+            [igxForScrollOrientation]="'vertical'"
+            [igxForContainerSize]='"500px"'
+            [igxForItemSize]='itemSize'
+            let-rowIndex="index"
+            let-odd="odd"
+            let-even="even">
+            <div [ngClass]="{even: even}" [style.height]='itemSize'>{{rowIndex}} : {{item.text}}</div>
+            </ng-template>
+        </div>
+    </article>
     <article class="sample-column">
-            <span>Remote Virtualization</span>
-            <br/>
-            <div style='height:500px; position: relative; overflow: hidden'>
-              <ng-template igxFor let-item [igxForOf]="remoteData | async" (onChunkPreload)="chunkLoading($event)"
-                [igxForScrollOrientation]="'vertical'"
-                [igxForContainerSize]='"500px"'
-                [igxForItemSize]='"50px"'
-                let-rowIndex="index" #virtDirRemote>
-                <div style='height:50px;'>Index: {{rowIndex}}, ID: {{item.ProductID}}, Name : {{item.ProductName}}</div>
-                </ng-template>
-            </div>
+        <span>Remote Virtualization</span>
+        <br/>
+        <div style='height:500px; position: relative; overflow: hidden'>
+            <ng-template igxFor let-item [igxForOf]="remoteData | async" (onChunkPreload)="chunkLoading($event)"
+            [igxForScrollOrientation]="'vertical'"
+            [igxForContainerSize]='"500px"'
+            [igxForItemSize]='"50px"'
+            let-rowIndex="index" #virtDirRemote>
+            <div style='height:50px;'>Index: {{rowIndex}}, ID: {{item.ProductID}}, Name : {{item.ProductName}}</div>
+            </ng-template>
+        </div>
     </article>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,4 @@`
`5`	`5`	`position: relative;`
`6`	`6`	`overflow: hidden;`
`7`	`7`	`}`
	`8`	`+.even { background-color: #1f1f1f; }`