How to handling csrf token in cookies in angular

Question

TS

constructor(
private global: GlobalService
) { }

  login() {
const data = {
'username': 'admin',
'password': 'admin@123'
};
    this.global.postData('users/', data).pipe(take(1)).subscribe((x: any) => {
              console.log(x);
            });
    }

global.service.ts

 postData(url: string, data: any, params?: any) {
    return this.httpClient.post(url, data, Object.assign(this.getHeaders(), params || {})).pipe(take(1));
  }

  putData(url: string, data: any, params?: any) {
    return this.httpClient.put(url, data, Object.assign(this.getHeaders(), params || {})).pipe(take(1));
  }
private getHeaders() {
    // tslint:disable-next-line:max-line-length

    // const credentials = this.creds.credentials;
    const headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    };

    const _creds = sessionStorage.getItem(environment.appKey + '-credentials') ||
      localStorage.getItem(environment.appKey + '-credentials');
    const credentials = _creds ? JSON.parse(_creds) : null;

    if (credentials && credentials.token) {
      headers['Authorization'] = 'Bearer ' + credentials.token;
    }

    return {
      headers: new HttpHeaders(headers)
    };
  }

What I'm trying to do here is to get the csrf token. but the csrf token is missing. I also added the HttpClientXsrfModule from the appModule.

It should display the csrftoken from the cookies also when clicking the login function the payload should be like.

PAYLOAD

{
 csrfmiddletoken:
 username: admin
 password: admin123
}