How to add copy button in ngx-markdown tag in angular

Question

I want to add copy button when in response have code like below.

please see my uploaded image what i want.

<markdown  class="variable-binding" [data]="markdown"></markdown>

  markdown = `## Markdown __rulez__!
---

### Syntax highlight
\`\`\`typescript
const language = 'typescript';
\`\`\`

### Lists
1. Ordered list
2. Another bullet point
   - Unordered list
   - Another unordered bullet

### Blockquote
> Blockquote to the max`;
}

I am using this code. I want to when in response have code like image then show copy button to copy only provided code like chatGBT copy button.

Click here for stack Bizz code

Answer 1

Copy to clipboard functionality is given by ngx-markdown. You have to configure it.

Step: 1. To add Clipboard library to your package.json use the following command.

npm install clipboard@^2.0.11 --save

Step: 2. To activate Clipboard allowing copy-to-clipboard you will need to include in angular.json example below...

"scripts": [
  "node_modules/clipboard/dist/clipboard.min.js",
]

Step: 3. Clipboard plugin

<markdown clipboard class="variable-binding" [data]="markdown"></markdown>

Reference: ngx-markdown