Component not rendering on Angular, It shows no error - html

Question

I am trying to upload the product details to which I am trying to get the values from the form.
I always face problem with handling forms with angular. Other components are rendering with no problem.
This is the component.html code:
<form>
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" id="title" class="form-control" #title/>
</div>
<div class="form-group">
<label for="category">Category</label>
<select name="category" id="category" class="form-control" #category>
<option value="cardio">Cardio</option>
<option value="strength">Strength</option>
<option value="strength">Cross Training</option>
<option value="strength">Outdoor</option>
<option value="strength">Home equipment</option>
</select>
</div>
<div class="form-group">
<label for="imported">Imported</label>
<select name="category" id="category" class="form-control" #imported>
<option value="International">International</option>
<option value="Indian">Indian</option>
</select>
</div>
<div class="form-group">
<label for="type">Type</label>
<input type="text" name="type" id="type" class="form-control" #type/>
</div>
<div class="form-group">
<label for="description">Description</label>
<input name="description" id="description" class="form-control" #description/>
</div>
<div class="form-group">
<label for="product-img">Image of the product</label>
<input type="file" (change)="onFileChange($event)" class="form-control"/>
</div>
<button type="button" (click)="uploadProduct(title.value, category.value, imported.value, type.value, description.value)" class="button-theme">Submit</button>
</form>
This is the component.ts code,
import { Component, OnInit } from '#angular/core';
import { Product } from '../model/product';
import { ProductsService } from '../products.service';
import { FormControl, FormGroup } from '#angular/forms';
import {FormsModule,ReactiveFormsModule} from '#angular/forms';
#Component({
selector: 'app-addproduct',
templateUrl: './addproduct.component.html',
styleUrls: ['./addproduct.component.css']
})
export class AddproductComponent implements OnInit {
product: Product;
constructor(private helper: ProductsService) { }
ngOnInit(): void {
}
onFileChange(event){
var data = {
"file": event.target.file
}
this.helper.uploadProduct(data).subscribe(d => {
this.product.path = d;
});
}
uploadProduct(title: string, category: string, imported: string, type: string, description: string){
this.product.mapProduct(title, description, type, category, imported);
this.helper.saveProduct(this.product);
}
}
TIA! :)