diff --git a/src/lib/api/flexbox/layout-gap.spec.ts b/src/lib/api/flexbox/layout-gap.spec.ts index 20eb0c47f..792079a06 100644 --- a/src/lib/api/flexbox/layout-gap.spec.ts +++ b/src/lib/api/flexbox/layout-gap.spec.ts @@ -140,6 +140,35 @@ describe('layout-gap directive', () => { })); + it('should add update gap styles when only 1 row is remaining', async(() => { + let template = ` +
+
+
+ `; + fixture = createTestComponent(template); + fixture.componentInstance.direction = 'row'; + fixture.detectChanges(); + + let nodes = queryFor(fixture, '[fxFlex]'); + expect(nodes.length).toEqual(4); + + fixture.componentInstance.rows = new Array(1); + fixture.detectChanges(); + + setTimeout(() => { + // Since the layoutGap directive detects the *ngFor changes by using a MutationObserver, the + // browser will take up some time, to actually announce the changes to the directive. + // (Kudos to @DevVersion) + + nodes = queryFor(fixture, '[fxFlex]'); + expect(nodes.length).toEqual(1); + + expect(nodes[0].nativeElement).not.toHaveStyle({'margin-right': '13px'}); + }); + + })); + it('should apply margin-top for column layouts', () => { verifyCorrectMargin('column', 'margin-bottom'); }); diff --git a/src/lib/api/flexbox/layout-gap.ts b/src/lib/api/flexbox/layout-gap.ts index 6acec5a57..3be10b68c 100644 --- a/src/lib/api/flexbox/layout-gap.ts +++ b/src/lib/api/flexbox/layout-gap.ts @@ -160,7 +160,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI .filter(el => el.nodeType === 1 && this._getDisplayStyle(el) != 'none'); let numItems = items.length; - if (numItems > 1) { + if (numItems > 0) { let lastItem = items[numItems - 1]; // For each `element` children EXCEPT the last,