Currently enrolled in a web development course, I am diving into the world of Angular 2 and TypeScript. Despite following along with the video tutorial and using the same code, my implementation is not working as expected, leaving me puzzled.
Here is the component snippet:
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 the HTML component:
<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 issue seems to be related to this line:
<button (click)='createDoor(width.value, height.value, type.value)'>Create door</button>
I'm struggling to understand why the click function is not receiving the correct parameters. It's expecting a string instead of a number even though I provide a numeric value. Any insights or suggestions would be greatly appreciated.