How to call the rest API in angular with get method

Question

I have an angular application,in that I have called the API for navigation(login to dashboard).

In dashboard I have called the API for channeldetails using dashboard service(created the service).

dashboard.service.ts

channeldetails(token) {
  let httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Token ' + token
    })
  };
  this.http.get(environment.apiUrl + '/api/data/json', httpOptions).subscribe(
    (drones: any[]) => {
      return drones;
    },
    err => {
      console.log("Error", err)
    }
  );
}

In component I have mentioned the above function in ngOnInit as

.component.ts

export class DashboardComponent implements OnInit {
  public drones: any = [];
  ngOnInit() {
    this.dronedetails();
  }
}

But I am not getting the response can anyone help me regarding this. Because I am new to this calling the API in angular.

Answer 1

dashboard.service.ts

channeldetails(token): Observable <any> {
  let httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Token ' + token
    })
  };
  return this.http.get(environment.apiUrl + '/api/data/json', httpOptions);
}

DashboardComponent.ts

export class DashboardComponent implements OnInit {
  public drones: any = [];
constructor(dashboardService: DashboardService)
  ngOnInit() {
    this.droneDetails();
  }
}

    droneDetails() {
this.dashboardService.channelDetails().subscribe(data=>{
console.log(data);
}, error => {
console.error(error);
})
    }