Error when trying to take a string and convert it to number

Question

Trying to input a number in html but was running into error:

Argument of type 'string' is not assignable to parameter of type 'number'.

So I am trying to convert from a string to number in angular, but im running into similar error

Argument of type 'string' is not assignable to parameter of type 'number'.

HTML:

<div class="sect">
        <mat-card>
            <mat-card-header>Enter a Standard</mat-card-header>
            <mat-card-content>
                <div>
                    <mat-form-field>
                        <mat-label>Enter Standard Name</mat-label>
                        <input
                            matInput 
                            #stdnameinput
                            type="string"
                         
    
    
                        required>
    
                    </mat-form-field>
                    <mat-form-field>
                        <mat-label>Enter Down Stream Rate</mat-label>
                        <input
                            matInput type="string"
                            #DSinput
                           
    
    
                        required>
    
                    </mat-form-field>
                    <mat-form-field>
                        <mat-label>Enter Up Stream Rate</mat-label>
                        <input
                            matInput type="string"
                            #USinput
                          
    
    
                        required>
    
                    </mat-form-field><br>
                    <mat-form-field>
                        <mat-label>Enter Split Ratio</mat-label>
                        <input
                            matInput type="string"
                            #SLinput
                          
    
    
                        required>
    
                    </mat-form-field>
                    <mat-form-field>
                        <mat-label>Enter Reach</mat-label>
                        <input
                            matInput type="string"
                            #ReachInput
                            
    
                        required>
    
                    </mat-form-field>
                    <mat-form-field>
                        <mat-label>Enter Power Budget Maximum</mat-label>
                        <input
                            matInput type="string"
                            #PBMaxInput
                            
    
    
                        required>
    
                    </mat-form-field><br>
                    <mat-form-field>
                        <mat-label>Enter Power Budget Minimum</mat-label>
                        <input
                            matInput type="string"
                            #PBMinInput
                           
    
    
                        required>
    
                    </mat-form-field><br>
                    <button mat-raised-button (click)="onAdd(stdnameinput.value, DSinput.value, USinput.value, SLinput.value,  ReachInput.value, PBMaxInput.value, PBMinInput.value )" color="primary">Add</button>
                </div>

Typescript:

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 = "GPON";
  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)=>{console.log(std)})
  }

  ngOnInit(): void {
    
    this.standardSub = this.StandardService.getStandardUpdateListener()
    .subscribe((standards: Standard[])=>{
      this.standards = standards;
    });
  }
  ngOnDestroy(){
    this.standardSub.unsubscribe();
  }
}