Added unit conversions and formula scaling

src/app/app.component.html

@@ -14,16 +14,20 @@
       <tbody>
         <tr *ngFor="let c of formula.components">
           <td>{{(c.component | async)?.name}}</td>
-            <td>{{c.quantity | scale: formula.total : newTotal | convertFromG: unit}}</td>
+          <td>{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
           <td>{{(c.component | async)?.cost | currency}}</td>
       </tbody>
     </table>
-    <input type="number" [(ngModel)]="newTotal">
-    <select [(ngModel)]="unit">
-        <option>g</option>
-        <option>oz</option>
-        <option>kg</option>
-        <option>lb</option>
-    </select>
+    <mat-form-field style="width: 75px">
+      <input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
+    </mat-form-field>
+    <mat-form-field style="width: 40px">
+      <mat-select placeholder="Unit" [(ngModel)]="unit">
+        <mat-option value="g">g</mat-option>
+        <mat-option value="oz">oz</mat-option>
+        <mat-option value="kg">kg</mat-option>
+        <mat-option value="lb">lb</mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
 </div>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {AngularFirestore} from 'angularfire2/firestore';
 import {share} from 'rxjs/operators';
+import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
 
 @Component({
   selector: 'app-root',
@@ -12,15 +13,28 @@ export class AppComponent {
   formula;
   components;
   unit = 'g';
-  newTotal: number = 0;
+
+  _newTotal: number = 0;
+  get newTotal() {
+    return new ConvertFromGPipe().transform(this._newTotal, this.unit);
+  }
+  set newTotal(total) {
+    this._newTotal = new ConvertToGPipe().transform(total, this.unit);
+  }
 
   constructor(private db: AngularFirestore) {
     this.formulas = this.db.collection('formulas').valueChanges();
   }
 
   displayFormula(formula) {
-    formula.components.map(row => row.component = this.db.doc(`components/${row.component.id}`).valueChanges().pipe(share()));
-    formula.total = formula.components.reduce((acc, row) => acc += row.quantity, 0);
+    formula.components.map(
+      row =>
+        (row.component = this.db
+          .doc(`components/${row.component.id}`)
+          .valueChanges()
+          .pipe(share()))
+    );
+    formula.total = formula.components.reduce((acc, row) => (acc += row.quantity), 0);
     this.newTotal = formula.total;
     this.formula = formula;
   }

src/app/app.module.ts

@@ -8,21 +8,18 @@ import { AppComponent } from './app.component';
 import {environment} from '../environments/environment.prod';
 import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
 import {ScalePipe} from './scale.pipe';
+import {AngularMaterialModule} from './material.module';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    ConvertFromGPipe,
-    ConvertToGPipe,
-    ScalePipe
-  ],
+  declarations: [AppComponent, ConvertFromGPipe, ConvertToGPipe, ScalePipe],
   imports: [
+    AngularMaterialModule,
     AngularFireModule.initializeApp(environment.firebase),
     AngularFirestoreModule,
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
-    ReactiveFormsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/material.module.ts

@@ -0,0 +1,107 @@
+import {NgModule} from '@angular/core';
+import {
+  MatAutocompleteModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatDividerModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatStepperModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule
+} from '@angular/material';
+
+@NgModule({
+  imports: [
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatStepperModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule
+  ],
+  exports: [
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatStepperModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule
+  ]
+})
+export class AngularMaterialModule {}

src/app/units.pipe.ts

@@ -4,16 +4,16 @@ import { Pipe, PipeTransform } from '@angular/core';
   name: 'convertFromG'
 })
 export class ConvertFromGPipe implements PipeTransform {
-    transform(grams: number, to: string): string {
+  transform(grams: number, to: string): number {
     switch (to) {
       case 'oz':
-              return `${Math.round(grams / 28.34952)} oz`;
+        return Math.round(grams / 28.34952);
       case 'lb':
-              return `${Math.round((grams * 0.0022) * 100) / 100} lb`;
+        return Math.round(grams * 0.0022 * 100) / 100;
       case 'kg':
-              return `${Math.round((grams / 1000) * 100) / 100} kg`;
+        return Math.round((grams / 1000) * 100) / 100;
       default:
-              return `${Math.round(grams)} g`;
+        return Math.round(grams);
     }
   }
 }
@@ -22,16 +22,16 @@ import { Pipe, PipeTransform } from '@angular/core';
   name: 'convertToG'
 })
 export class ConvertToGPipe implements PipeTransform {
-    transform(units: number, from: string): string {
+  transform(units: number, from: string): number {
     switch (from) {
       case 'oz':
-              return `${Math.round(units * 28.34952)} oz`;
+        return Math.round(units * 28.34952);
       case 'lb':
-              return `${Math.round(units / 0.0022)} lb`;
+        return Math.round(units / 0.0022);
       case 'kg':
-              return `${Math.round(units * 1000)} kg`;
+        return Math.round(units * 1000);
       default:
-              return `${Math.round(units)} g`;
+        return Math.round(units);
     }
   }
 }

src/assets/css/base.scss

@@ -0,0 +1 @@
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';