Button click event is not reponding in Angular

Question

In my .html file, I have the below code :- Here the button Data Import appears....

<button mat-menu-item (click)="download()">
                <mat-icon>cloud_download</mat-icon>
                <span>Data Import</span>
</button>

In the component.ts file :-
Here I have defined the functioned to be called after the button is clicked::

  constructor(
           private downloadService: DownloadService
      )

    download(){
      this.downloadService.getDownload();

      }

In downloadservice.ts file :-

Here the service has been created which is going to call the api /Download at the backend.

 export class DownloadService {
     etext : String;
    baseUrl: string = environment.apiUrl + '/Download';
      constructor(private http: HttpClient) { }

      getDownload() {
        return this.http.get(this.baseUrl);
        this.etext="The operation has been done";
      }
      }

When I click on the Data Import button ..nothing happens and no event is generated.

Bilal Siddiqui · Answer 1 · 2019-10-19T13:05:04.743

4

1- The second line will not be executed as first statement has a return keyword:

return this.http.get(this.baseUrl);
this.etext="The operation has been done";

2- As Martin Čuka commented below, you need to subscribe the Observable being returned by httpclient.

this.downloadService.getDownload().subscribe(resp => { // do whatever });

edited Oct 19 '19 at 13:05

answered Oct 19 '19 at 12:55

Bilal Siddiqui

3,579
1
13
20

3

but that's not the only problem. Nothing happens because httpClient is returning Observable you need to **subscribe** to it... – Martin Čuka Oct 19 '19 at 12:58

score 1 · Accepted Answer · answered Oct 19 '19 at 13:02

Nothing happens because httpClient is returning Observable you need to subscribe to it. Add subsribe to your service

this.downloadService.getDownload().subscribe();

as for the line

this.etext="The operation has been done";

compiler will say to you it's unreachable nevertheless the real problem is in missing subscribe

score 1 · Answer 3 · edited Nov 21 '19 at 13:37

1

 export class Component {
  constructor(private downloadService: DownloadService){}
    download(){
      this.downloadService.getDownload().subscribe(
        () => {
          // success code
        },
        (error) => {
         // error code
        }
      );
    }
}}

edited Nov 21 '19 at 13:37

Parthi04

1,121
4
21
39

answered Oct 19 '19 at 13:32

Muralidharan C

73
4

score 0 · Answer 4 · answered Oct 19 '19 at 13:04

0

I think that the http request is fired. However, you don't know when it finished because you are not subscribing to the Observable that the http.get returns.

component.ts

export class Component {

  constructor(private downloadService: DownloadService){}

    download(){
      this.downloadService.getDownload().subscribe(
        () => {
          // success code
        },
        (error) => {
         // error code
        }
      );
    }
}

Be careful with subscription, you have to unsubscribe when the subscription finish. https://blog.angularindepth.com/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0

answered Oct 19 '19 at 13:04

German Quinteros

1,870
9
33

that's not true. You don't have to unsubsribe httpClient. Angular will do it for you. You have to unsubscribe custom subscriptions... see docs https://angular.io/guide/http. And again NO the http request is NOT fired. See docs about httpClient – Martin Čuka Oct 19 '19 at 13:07
1

@MartinČuka, see de following discussion about this topic: https://stackoverflow.com/a/57274287/12171299 https://stackoverflow.com/a/51850733/12171299 As they said there, although Angular automatically unsubscribe the http requests, you should be aware of the case when the user closes the tab before the http response is received, which can cause performance issues. – German Quinteros Oct 20 '19 at 22:01

Button click event is not reponding in Angular

4 Answers4