Copying a curl command in angular

Question

I have created a curl command using the response which I got from API. But now I want to add functionality to copy that curl command, but I am not able to achieve it. I can't use the traditional way of using " document.getElementById(id).value " because in this I will get the HTML tags as well which I have used to form that command. I am providing an example so that it becomes more clear

    <div class="attacks-detail-tab-value" id="request-curl" data-value="1">
    <strong style="color: #0e1446;">curl&nbsp; &nbsp;--location&nbsp; &nbsp;--request</strong>
    &nbsp; &nbsp;{{self.response.data1}}&nbsp; &nbsp; 
    <span style="color: black; word-break: break-word;"> '{{self.response.data1.url }}'</span> \ 
    <strong style="color: #0e1446;"></strong>
    <ul style="padding: 0; list-style-type: none;">
      <li ng-repeat="(key, value) in self.response.head" style="margin-bottom: 5px;">
      <strong style="color: #0e1446;">--header</strong> 
      <span style="color: black;">' {{ key }}: {{ value }} '
      </span>&nbsp; &nbsp;\</li> 
            <span >
      <strong style="color: #0e1446;">--data </strong> "{
      <ul style="padding: 0; list-style-type: none;">
                <li  ng-repeat="(key, value) in self.response.param"
                style="margin-bottom: 5px;"> {{key }}: {{ value }} 
        </li>}" 
       </ul>
       </span>
      </div>

You can see how I have created the curl command. And the curl command is getting created but now I want to copy that curl to the clipboard and I don't know how to do that. Can someone suggest some solution for it?

You'll probably find what you want somewhere in this thread : https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — Jeremy Thille, Jun 25 '21 at 09:25

score 1 · Accepted Answer · answered Jun 25 '21 at 09:28

The copy-to-clipboard requires a string. I have set up a .ts to show how you can assemble the parts of the curl into an object, and then have the string representation on-ready to be copied. The reason for building the object is to allow you to use that object to build the html you have in your question. I tried to copy and paste that HTML into an angular project and got errors so my example does not have that. However you can easily see how to assemble it. The copy takes place on a button in the .html

StackBlitz link:

HTML: https://stackblitz.com/edit/angular-ivy-fesbmr?file=src/app/app.component.ts

<button (click)="copyMessage(curlString)" value="click to copy" >Copy this</button>

.TS page

import { Component, VERSION, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 key:string = 'theKey';
 value:string = 'theValue';
 response:any = {data1: {text:'theResponseData', value:'theResponseValue'}};
 curl:any = {
    curl: 'curl',
    locationFlag: '--location',
    requestFlag: '--request',
    responseData: this.response.data1.text,
    responseDataUrl: this.response.data1.url,
    headerFlag:'--header',
    headerData:`'${this.key}: ${this.value}'`,
    dataFlag: '---data',
    dataData: `{${this.key}: ${this.value}}`
  };
 curlString:string = Object.values(this.curl).join(" ");

copyMessage(val: string){
  const selBox = document.createElement('textarea');
  selBox.style.position = 'fixed';
  selBox.style.left = '0';
  selBox.style.top = '0';
  selBox.style.opacity = '0';
  selBox.value = val;
  document.body.appendChild(selBox);
  selBox.focus();
  selBox.select();
  document.execCommand('copy');
  document.body.removeChild(selBox);
}

ngOnInit() {
  console.log(this.curlString);
}
}

Copying a curl command in angular

1 Answers1