Api Call in service file
Making API calls is a common task in Angular applications, and it can be achieved using Angular's built-in HttpClient service. Here are the steps to make API calls in Angular:
1. Import the HttpClient module: You need to import the HttpClientModule in your app.module.ts file.
import { HttpClient, HttpHeaders } from '@angular/common/http';
2. Create a service: Create a new service to handle the HTTP requests. In this service, you can create methods to handle different types of requests (GET, POST, PUT, DELETE, etc.). Here's an example of a service:
export class ApiService {
apiUrl = 'https://jsonplaceholder.typicode.com';
constructor(private http: HttpClient) { }
getPosts(): Observable<any[]> {
return this.http.get<any[]>(
`${this.apiUrl
}/posts`);
}
getPostById(id: number): Observable<any> {
return this.http.get<any>(
`${this.apiUrl
}/posts/${id
}`);
}
addPost(post: any): Observable<any> {
return this.http.post<any>(
`${this.apiUrl
}/posts`, post);
}
updatePost(id: number, post: any): Observable<any> {
return this.http.put<any>(
`${this.apiUrl
}/posts/${id
}`, post);
}
deletePost(id: number): Observable<any> {
return this.http.delete<any>(
`${this.apiUrl
}/posts/${id
}`);
}
}
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
const API_URL = 'https://dev-eastus2-alphat-win-app.azurewebsites.net/api/';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
constructor(private http: HttpClient) { }
register(data:any): Observable<any> {
return this.http.post(API_URL + 'CreateClinic', data, httpOptions);
}
vet_register(data:any): Observable<any> {
return this.http.post(API_URL + 'RegisterClinicUser', data, httpOptions);
}
getClinicCodeCheck(clinicCode:any): Observable<any> {
return this.http.get(API_URL + 'GetClinicUserInfoByInvitationCode?InvitationCode='+clinicCode, { responseType: 'text' });
}
getMasterData(uids:any): Observable<any> {
return this.http.get(API_URL + 'GetAllMasterData/'+uids, { responseType: 'text' });
}
forgotPassword(data:any) {
return this.http.post(API_URL + 'UpdateUserPassword', data, httpOptions);
}
Component.ts file
import{TestService}from './services/test.service'
constructor(private testservice:TestService){}
resultdata:any;
ngOnInit() {
this.testservice.sendGetRequest().subscribe((data)=>{
this.resultdata=data;
console.log(this.resultdata)
})
}
constructor(
public http: HttpClient, private config: ConfigService
) {
this.config.Data.subscribe((data) => {
if (data != '') {
this.envInfo = data;
this.baseUrl = this.envInfo.apiURL;
}
})
this.options = {
headers: new HttpHeaders({
Accept: 'application/json',
Authorization: 'Bearer ' + localStorage.getItem('access_token'),
})
};
}
postData(url: any, formData: any) {
let apiUrl = this.baseUrl + url;
this.dataCaching();
return this.http.post(apiUrl, formData, this.options).pipe(map(res => res))
}
getData(url: any) {
let apiUrl = this.baseUrl + url;
this.dataCaching();
return this.http.get(apiUrl, this.options).pipe(map(res => res));
}
putData(url: any, formData: any) {
let apiUrl = this.baseUrl + url;
this.dataCaching();
return this.http.put(apiUrl, formData, this.options).pipe(map(res => res));
}
downloadData(url: string) {
const apiUrl = this.baseUrl + url;
this.dataCaching();
return this.http.get(apiUrl, this.options1).pipe(map(res => res));
}
downloadPost(url: string, formData: any) {
const apiUrl = this.baseUrl + url;
this.dataCaching();
return this.http.post(apiUrl, formData, this.options1).pipe(map(res => res));
}
authVerification(url:any, formData:any,options:any) {
let apiUrl = this.baseUrl + url;
this.dataCaching();
return this.http.post(apiUrl, formData, options).pipe(map(res => res));
}
