http get request using Angular - html

Question

I have a question about a get and put request using angular.
I know how I can do a get or put request when I for example click on a button. For that, I just have to bind my request to the button. But now I want to be able to make a get request for example without some button. that means ich enters for example a barcode and just clicks on my keyboard on entering and releases my get request.
A normal code for a get look for example like:
this.codeService.getBarcode(barcode).subscribe(_=>
...
)
my question is what do I have to do in the subscribe to be able to do this get request if I don't have some button to click

Answer 1

If you want to get data when you load the app without clicking but in OnInit time.
You can write direct in your component but that is not a clean code.
You better write a service which will hold get and put.
Here is a little example.
Here you have get, post, put and delete
export class EmployeeService {
private baseUrl = "http://localhost:8081/rest/user";
constructor(private http: HttpClient) { }
getEmployee(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/${id}`);
}
createEmployee(employee: object): Observable<object> {
return this.http.post(`${this.baseUrl}`, employee);
}
updateEmployee(id: number, value: any): Observable<object> {
return this.http.put(`${this.baseUrl}/${id}`, value);
}
deleteEmployee(id: number): Observable<any> {
return this.http.delete(`${this.baseUrl}/${id}`);
}
getEmployeesList(): Observable<any> {
return this.http.get(`${this.baseUrl}`);
}
}
You need then to add HttpClientModule in the app.module.ts
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule <-- This here
],
You can have an interface like this.
export class Employee {
id: number;
name: string;
age: number;
}
Your component ts
export class EmployeeListComponent implements OnInit {
employees: Observable<Employee[]>;
constructor(private employeeService: EmployeeService,
private router: Router) {}
ngOnInit() {
this.reloadData();
}
reloadData() {
this.employees = this.employeeService.getEmployeesList();
}
deleteEmployee(id: number) {
this.employeeService.deleteEmployee(id)
.subscribe(data => console.log(data, id));
this.reloadData();
}
employeeDetails(id: number) {
this.router.navigate(['details', id]);
}
}
Your component HTML
<div class="panel panel-primary">
<div class="panel-heading">
<h2>Employee List</h2>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Description</th>
<th>City</th>
<th>Extra</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees | async">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td><button (click)="deleteEmployee(employee.id)" class="btn btn-danger">Delete</button>
<button (click)="employeeDetails(employee.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>