title: How to call rest api on button click in Angular
body: <p>I have an angular app, at the moment it has some data coming in from a rest api. I want to just call that api on a click function, what would be the correct way to implement this?</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ApiService } from '../../../services/api.service';
  
  @Component({
    selector: 'app-content',
    templateUrl: './content.component.html',
    styleUrls: ['./content.component.scss']
  })
  export class ContentComponent implements OnInit {
  
    public data = [];
    public apiData: any;
  
    constructor(private service: ApiService) { }
  
    private getAll() {
      this.service.getAll().subscribe((results) =&gt; {
        console.log('Data is received - Result - ', results);
        this.data = results.results;
      })
    }
  
    ngOnInit() {
      //this.getAll();
    }
  
    onClick() {
      this.getAll()
      }
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="jumbotron hero"&gt;
    &lt;div class="container"&gt;
      &lt;h1 class="display-4 text-center header mb-5"&gt;SEARCH&lt;/h1&gt;
      &lt;form&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-8"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="inputPassword2" class="sr-only"&gt;Search&lt;/label&gt;
              &lt;input type="password" class="form-control form-control-lg" id="inputPassword2"
                placeholder="Search iTunes..."&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-4"&gt;
              &lt;button (click)="onClick" class="btn btn-primary btn-block btn-lg"&gt;Get All&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container" &gt;
    &lt;table class="table"&gt;
      &lt;thead class="thead-light"&gt;
        &lt;tr&gt;
          &lt;th&gt;Artwork&lt;/th&gt;
          &lt;th&gt;Artist&lt;/th&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Genre&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let user of data"&gt;
          &lt;td&gt;&lt;img src="{{user.artworkUrl60}}"&gt;&lt;/td&gt;
          &lt;td&gt;{{user.artistName}}&lt;/td&gt;
          &lt;td&gt;{{user.collectionName}}&lt;/td&gt;
          &lt;td&gt;{{user.primaryGenreName}}&lt;/td&gt;
          &lt;td&gt;{{user.collectionPrice}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>