how to call api in angular

                           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));

      }

Angular with Typescript programming..

 Angular with Typescript programming..

  this.datalist = Object.data;

      if (this.datalist != null) {

        this.datalist.forEach(ele => {

          ele.fullname = ele.firstname + ' ' + ele.lastname;

          this.candidatename=ele.fullname

        });

      }

firstname = Abhi 

lastname = reddy

fullname= Abhi reddy

Indexof:

 The location within the calling string to start the search from. It can be any integer between 0 and the length of the string. The default value is 0.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let index = fruits.indexOf("Apple");

output: 2

ex:1

 

this.ListData.forEach(ele => {

      ele.index = this.ListData.indexOf(ele) + 1;

)}

ex:2

 

var idDot = name.lastIndexOf(".") + 1;

Splice:

The splice method can be used in Angular applications to manipulate arrays of data. Here's how it works:

 

array.splice(startIndex, deleteCount, item1, item2, ...);

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  template: `

    <button (click)="addItem()">Add Item</button>

    <button (click)="removeItem()">Remove Item</button>

    <ul>

      <li *ngFor="let item of items">{{ item }}</li>

    </ul>

  `,

})

export class AppComponent {

  items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  addItem() {

    this.items.splice(1, 0, 'New Item'); // Add 'New Item' at index 1

  }

  removeItem() {

    this.items.splice(1, 1); // Remove 1 item at index 1

  }

}