Adding clearer placeholder and a reset button (#12)

mtlynch · May 2, 2018 · b29418b · b29418b
1 parent 7e064c4
commit b29418b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/app/public/home-page/home-page.component.html b/src/app/public/home-page/home-page.component.html
@@ -2,10 +2,11 @@
   <span>Ingredient Parser Demo</span>
 </mat-toolbar>
 <form>
-    <mat-form-field class="input-full-width">
-      <input matInput placeholder="Ingredient to parse" value="1/2 cup sugar"  name="ingredientRaw"[(ngModel)]="ingredientRaw">
+    <mat-form-field class="input-full-width" floatPlaceholder="never">
+      <input matInput placeholder="2 cups brown sugar" name="ingredientRaw" [(ngModel)]="ingredientRaw">
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="parse(ingredientRaw)" [disabled]="isWaitingForParseResult">Parse</button>
+    <button mat-raised-button (click)="reset()">Reset</button>
   </form>
 <div *ngIf="isWaitingForParseResult">
     <mat-spinner></mat-spinner>

diff --git a/src/app/public/home-page/home-page.component.ts b/src/app/public/home-page/home-page.component.ts
@@ -30,4 +30,9 @@ export class HomePageComponent implements OnInit {
       });
   }
 
+  reset() {
+    this.ingredientRaw = '';
+    this.parseResult = null;
+  }
+
 }