Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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

Click here

please see my uploaded image what i want.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<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

>Solution :

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

Ref image of ngx-markdown

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading