fix(input): don't add empty prefix & suffix wrappers

angular · Mar 22, 2017 · 8fe05ab · 8fe05ab
1 parent c524438
commit 8fe05ab
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/lib/input/index.ts b/src/lib/input/index.ts
@@ -1,5 +1,12 @@
-import {NgModule, ModuleWithProviders} from '@angular/core';
-import {MdPlaceholder, MdInputContainer, MdHint, MdInputDirective} from './input-container';
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {
+  MdHint,
+  MdInputContainer,
+  MdInputDirective,
+  MdPlaceholder,
+  MdPrefix,
+  MdSuffix
+} from './input-container';
 import {MdTextareaAutosize} from './autosize';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
@@ -12,7 +19,9 @@ import {PlatformModule} from '../core/platform/index';
     MdInputContainer,
     MdHint,
     MdTextareaAutosize,
-    MdInputDirective
+    MdInputDirective,
+    MdPrefix,
+    MdSuffix,
   ],
   imports: [
     CommonModule,
@@ -24,7 +33,9 @@ import {PlatformModule} from '../core/platform/index';
     MdInputContainer,
     MdHint,
     MdTextareaAutosize,
-    MdInputDirective
+    MdInputDirective,
+    MdPrefix,
+    MdSuffix,
   ],
 })
 export class MdInputModule {

diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html
@@ -1,6 +1,6 @@
 <div class="mat-input-wrapper">
   <div class="mat-input-table">
-    <div class="mat-input-prefix">
+    <div class="mat-input-prefix" *ngIf="_prefixChildren.length">
       <!-- TODO(andrewseguin): remove [md-prefix] -->
       <ng-content select="[mdPrefix], [matPrefix], [md-prefix]"></ng-content>
     </div>
@@ -23,7 +23,7 @@
       </span>
     </div>
 
-    <div class="mat-input-suffix">
+    <div class="mat-input-suffix" *ngIf="_suffixChildren.length">
       <!-- TODO(andrewseguin): remove [md-suffix] -->
       <ng-content select="[mdSuffix], [matSuffix], [md-suffix]"></ng-content>
     </div>

diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
@@ -72,6 +72,20 @@ export class MdHint {
 }
 
 
+/** The input prefix. */
+@Directive({
+  selector: '[mdPrefix], [matPrefix], [md-prefix]'
+})
+export class MdPrefix {}
+
+
+/** The input suffix. */
+@Directive({
+  selector: '[mdSuffix], [matSuffix], [md-suffix]'
+})
+export class MdSuffix {}
+
+
 /** The input directive, used to mark the input that `MdInputContainer` is wrapping. */
 @Directive({
   selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`,
@@ -289,6 +303,10 @@ export class MdInputContainer implements AfterContentInit {
 
   @ContentChildren(MdHint) _hintChildren: QueryList<MdHint>;
 
+  @ContentChildren(MdPrefix) _prefixChildren: QueryList<MdPrefix>;
+
+  @ContentChildren(MdSuffix) _suffixChildren: QueryList<MdSuffix>;
+
   ngAfterContentInit() {
     if (!this._mdInputChild) {
       throw new MdInputContainerMissingMdInputError();