demo: add clipboard button functionality and relevant styling (#4845)

ezekiel-charo · web-flow · commit db98bf0e2be8 · 2025-06-29T17:09:00.000+02:00
Add a "Copy to clipboard" button on the code component to enable one-click copying of snippets across the demo site. Fixes #4826
diff --git a/demo/src/app/shared/code.component.ts b/demo/src/app/shared/code.component.ts
@@ -5,27 +5,55 @@ import {
 	ElementRef,
 	inject,
 	input,
+	signal,
 	viewChild,
 } from '@angular/core';
 
 import { ISnippet } from '../services/snippet';
 import { CodeHighlightService } from '../services/code-highlight.service';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
 	selector: 'ngbd-code',
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgbTooltip],
 	template: `
-		<pre class="language-{{ snippet().lang }}"><code #code class="language-{{ snippet().lang }}"></code></pre>
+		<div class="position-relative">
+			<button
+				(click)="copyToClipboard()"
+				[ngbTooltip]="showAsCopied() ? 'Copied!' : 'Copy to clipboard'"
+				class="btn btn-clipboard position-absolute top-0 end-0 mt-2 me-3 z-2"
+				aria-label="Copy code to clipboard"
+			>
+				<i class="bi bi-{{ showAsCopied() ? 'clipboard-check' : 'clipboard' }}"></i>
+			</button>
+			<pre class="language-{{ snippet().lang }}"><code #code class="language-{{ snippet().lang }}"></code></pre>
+		</div>
 	`,
 })
 export class CodeComponent {
+	private _copyBtnTooltip = viewChild.required(NgbTooltip);
 	private _codeEl = viewChild.required('code', { read: ElementRef });
 	snippet = input.required<ISnippet>();
 
+	showAsCopied = signal(false);
+
 	constructor() {
 		const highlightService = inject(CodeHighlightService);
 		afterNextRender(() => {
 			this._codeEl().nativeElement.innerHTML = highlightService.highlight(this.snippet().code, this.snippet().lang);
 		});
 	}
+
+	copyToClipboard() {
+		navigator.clipboard.writeText(this.snippet().code).then(() => {
+			this.showAsCopied.set(true);
+
+			// 'Restart' tooltip to show 'Copied!' message
+			this._copyBtnTooltip().close();
+			setTimeout(() => this._copyBtnTooltip().open(), 0);
+
+			setTimeout(() => this.showAsCopied.set(false), 2000);
+		});
+	}
 }
diff --git a/demo/src/style/prism-dark.css b/demo/src/style/prism-dark.css
@@ -130,3 +130,7 @@
 [data-bs-theme='dark'] .token.entity {
 	cursor: help;
 }
+[data-bs-theme='dark'] .btn-clipboard,
+[data-bs-theme='dark'] .btn-clipboard:hover {
+	background: #161b22;
+}
diff --git a/demo/src/style/prism-light.css b/demo/src/style/prism-light.css
@@ -129,3 +129,7 @@ pre[class*='language-'] > code[class*='language-'] {
 .token.entity {
 	cursor: help;
 }
+.btn-clipboard,
+.btn-clipboard:hover {
+	background: #f6f8fa;
+}

Original file line number	Diff line number	Diff line change
`@@ -130,3 +130,7 @@`
`130`	`130`	`[data-bs-theme='dark'] .token.entity {`
`131`	`131`	`cursor: help;`
`132`	`132`	`}`
	`133`	`+[data-bs-theme='dark'] .btn-clipboard,`
	`134`	`+[data-bs-theme='dark'] .btn-clipboard:hover {`
	`135`	`+ background: #161b22;`
	`136`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -129,3 +129,7 @@ pre[class='language-'] > code[class='language-'] {`
`129`	`129`	`.token.entity {`
`130`	`130`	`cursor: help;`
`131`	`131`	`}`
	`132`	`+.btn-clipboard,`
	`133`	`+.btn-clipboard:hover {`
	`134`	`+ background: #f6f8fa;`
	`135`	`+}`