title: Error when trying to take a string and convert it to number
body: <p>Trying to input a number in html but was running into error:</p>
  <blockquote>
  <p>Argument of type 'string' is not assignable to parameter of type
  'number'.</p>
  </blockquote>
  <p>So I am trying to convert from a string to number in angular, but im running into similar error</p>
  <blockquote>
  <p>Argument of type 'string' is not assignable to parameter of type
  'number'.</p>
  </blockquote>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;sect&quot;&gt;
          &lt;mat-card&gt;
              &lt;mat-card-header&gt;Enter a Standard&lt;/mat-card-header&gt;
              &lt;mat-card-content&gt;
                  &lt;div&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-label&gt;Enter Standard Name&lt;/mat-label&gt;
                          &lt;input
                              matInput 
                              #stdnameinput
                              type=&quot;string&quot;
                           
      
      
                          required&gt;
      
                      &lt;/mat-form-field&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-label&gt;Enter Down Stream Rate&lt;/mat-label&gt;
                          &lt;input
                              matInput type=&quot;string&quot;
                              #DSinput
                             
      
      
                          required&gt;
      
                      &lt;/mat-form-field&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-label&gt;Enter Up Stream Rate&lt;/mat-label&gt;
                          &lt;input
                              matInput type=&quot;string&quot;
                              #USinput
                            
      
      
                          required&gt;
      
                      &lt;/mat-form-field&gt;&lt;br&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-label&gt;Enter Split Ratio&lt;/mat-label&gt;
                          &lt;input
                              matInput type=&quot;string&quot;
                              #SLinput
                            
      
      
                          required&gt;
      
                      &lt;/mat-form-field&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-label&gt;Enter Reach&lt;/mat-label&gt;
                          &lt;input
                              matInput type=&quot;string&quot;
                              #ReachInput
                              
      
                          required&gt;
      
                      &lt;/mat-form-field&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-label&gt;Enter Power Budget Maximum&lt;/mat-label&gt;
                          &lt;input
                              matInput type=&quot;string&quot;
                              #PBMaxInput
                              
      
      
                          required&gt;
      
                      &lt;/mat-form-field&gt;&lt;br&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-label&gt;Enter Power Budget Minimum&lt;/mat-label&gt;
                          &lt;input
                              matInput type=&quot;string&quot;
                              #PBMinInput
                             
      
      
                          required&gt;
      
                      &lt;/mat-form-field&gt;&lt;br&gt;
                      &lt;button mat-raised-button (click)=&quot;onAdd(stdnameinput.value, DSinput.value, USinput.value, SLinput.value,  ReachInput.value, PBMaxInput.value, PBMinInput.value )&quot; color=&quot;primary&quot;&gt;Add&lt;/button&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>Typescript:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Subscription } from 'rxjs';
  import { StandardService } from '../standard.service';
  import { Standard } from '../standards.model';
  
  @Component({
    selector: 'app-standards',
    templateUrl: './standards.component.html',
    styleUrls: ['./standards.component.css']
  })
  export class StandardsComponent implements OnInit {
  
    constructor(public StandardService: StandardService) { }
  
    Name: string = &quot;GPON&quot;;
    DownstreamRate: number = 2488;
    UpstreamRate: number = 2488;
    Splitlimit: number = 64;
    Reach: number = 60;
    PowerBudgetMax: number = 25;
    PowerBudgetMin: number = 15;
    private standardSub: Subscription;
    
    standards: Standard[] = [];
  
    onAdd(Name: string, DownstreamRateS:string, UpstreamRateS: string, SplitlimitS: string, ReachS: string, PowerBudgetMaxS: string, PowerBudgetMinS: number){
      const DownstreamRate: number = +DownstreamRateS;
      const UpstreamRate: number = +UpstreamRateS;
      const Splitlimit : number = +SplitlimitS;
      const Reach : number = +ReachS;
      const PowerBudgetMax : number = +PowerBudgetMaxS;
      const PowerBudgetMin : number = +PowerBudgetMinS;
  
  
      this.StandardService.addStandard(Name, DownstreamRate, UpstreamRate, Splitlimit, Reach, PowerBudgetMax, PowerBudgetMin)
      .subscribe((std:any)=&gt;{console.log(std)})
    }
  
    ngOnInit(): void {
      
      this.standardSub = this.StandardService.getStandardUpdateListener()
      .subscribe((standards: Standard[])=&gt;{
        this.standards = standards;
      });
    }
    ngOnDestroy(){
      this.standardSub.unsubscribe();
    }
  }
  </code></pre>