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,