I'm working on a CRUD application using an array. Once I add an item to the array, the HTML input field doesn't clear or reset. I've searched online but couldn't find a reset method in Angular. How can I clear the input field after adding an item?
Here's the code snippet:
app.component.html
<div class="container">
<div class="jumbotron text-center">
<h1>Angular CRUD</h1>
</div>
<div class="container">
<form class="form-inline custom-centered" name="itemForm">
<label for="item">Add an Item:</label>
<input type="text" class="form-control" name="Value" id="Value" #item>
<button type="submit" class="btn btn-success" (click)="create(item.value)" style="width: 80px;">Add</button>
</form>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of collection">
<td>{{item.name}}</td>
<td>
<button class="btn btn-info btn-sm mr-1">Edit</button>
<button (click)="deleteItem(item)" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</tbody>
</table>
app.component.ts
export class AppComponent {
collection: any = [];
create(item: any) {
this.collection.push({
name: item
});
}
deleteItem(item: any) {
this.collection.splice(item, 1);
}
}
If you have any suggestions or solutions, please share them. Thank you!