fix(fxLayoutGap): update gap logic when num children reduces to 1.

Fixes #433. Closes #444.

Author: aldo-roman

src/lib/api/flexbox/layout-gap.spec.ts

@@ -140,6 +140,37 @@ describe('layout-gap directive', () => {
 
     }));
 
+    fit('should add update gap styles when only 1 row is remaining', async(() => {
+      let template = `
+              <div fxLayoutAlign='center center' fxLayoutGap='13px'>
+                  <div fxFlex *ngFor='let row of rows'></div>
+              </div>
+          `;
+      fixture = createTestComponent(template);
+      fixture.componentInstance.direction = 'row';
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+
+      expect(nodes.length).toEqual(4);
+      expect(nodes[0].nativeElement).toHaveStyle({'margin-right': '13px'});
+      expect(nodes[3].nativeElement).not.toHaveStyle({'margin-right': '13px'});
+
+      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');
     });

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,