0

I am following a course on webdevelopment and i'm now learning angular 2 and typescript. I've the same code as the video but mine doesn't work and i'm baffled.

here is my component

  createDoor(width:number, height: number, type: string) {
    const payload = {width_in: width, height_in: height, type}
    this.http.post<Door>(`${this.baseURL}/door`, payload).subscribe(
      response => {
        this.doors.push(response)
      }
    )
  }

and here is my component html


<h1> See all doors </h1>

<ul *ngIf="doors.length > 0">
    <li *ngFor="let door of doors">
        <p> {{ door.type }} door ({{door.width_in}} x {{door.height_in}})</p>
    </li>
</ul>

<p *ngIf="doors.length === 0"> No new doors yet. Create one below</p>

<h1>Create a new door below</h1>

<label for="width">Width:</label>
<input name="width" type="number" id="width"  placeholder="Add a door width" required #width>

<label for="height">height:</label>
<input name="height" type="number" id='height' placeholder="Add a door height" required #height>

<label for="type">Type</label>
<select name="type" id="type" id="type" #type>
    <option value="" selected>Please choose</option>

    <option value="Sliding">Sliding</option>
    <option value="Basic">Basic</option>
    <option value="Automatic">Automatic</option>
</select>

<button (click)='createDoor(width.value, height.value, type.value)'>Create door</button>

the code is on this line

<button (click)='createDoor(width.value, height.value, type.value)'>Create door</button>

Can someone please tell me what is going on? Why is my click function not getting the right parameters. I give a number but it says I gave a string. Thank you

Matthieu Riegler
  • 31,918
  • 20
  • 95
  • 134
GoldenBags
  • 11
  • 4

2 Answers2

0

Because type="number" restricts only in the browser the type. But in ts you will get a string. You have to convert it yourself to a number (f. e. with the + sign).

For further reading see this: html-input-type-number

derstauner
  • 1,478
  • 2
  • 23
  • 44
0

Just receive it as a string then throw it into a parseInt. No big deal just a communication difference between the DOM and JS/TS.

DullJoker
  • 42
  • 5