Upload search results data in angular with a button click

Question

I am having a project requirement on Angular. I am using search option where I am able to search data from external api and display user below it when clicking on Add button. I tried implementing using angular primeng autocomplete.

But problem is that as per the screenshot here https://imgur.com/a/wXYqOpM

When I clicked on Upload List, all the user data displayed should be uploaded with a button click (either as file or array). Since I am new to angular, can you help me to find a suitable solution for the same?

Thanks in advance Patric

Stöger Stöger · Accepted Answer · 2019-05-02T06:47:21

There's a bit more input needed in order to properly, entirely answer your question. I'll just make a couple assumptions to do so.

I suppose that you're having an array of patients/users in your .ts file and display that data in your .html using data interpolation. Something like this:

upload-list.component.ts:
...
public userList = ['Patient 1', 'Patient 2', 'Patient 3']
...

upload-list.component.html:
...
<your-list-display>{{ userList }}</your-list-display>
<button (click)='sendData()'>Upload list</button>

Eventually, all you need to do is inject the HttpClient (imported from @angular/common/http) into your component's constructor and use it (preferably in a service, read up in the angular.io docs for that specifically, how to share data between components etc).

Roughly outlined, something like this shall work:

upload-list.component.ts:
import { HttpClient } from '@angular/common/http';

...

export class UserList {
  constructor(private http: HttpClient) {}

  public sendData(): void {
    this.http.post<any>(apiURL, this.userList).subscribe(result => {
      ... // do something with the result from your HTTP request.
    }, error => {
      ... // handle error as wished
    });
  }
}

Hope that'll help - Regards

EDIT - moved API call into function which'll be called upon button click

Upload search results data in angular with a button click

1 Answers