refactor(components/copy-button): changing clipboard button

changing clipboard button and changing copied text to icon

Author: Thiago Bussola

src/app/shared/components/copy-button/copy-button.component.html

@@ -2,5 +2,7 @@
   class="clipboard"
   (click)="onCopy()"
   [cdkCopyToClipboard]="elRef.nativeElement.lastElementChild.textContent"
->{{buttonText | async}}</button>
-<ng-content></ng-content>
+>
+  <mat-icon>{{ buttonIcon | async }}</mat-icon>
+</button>
+<ng-content></ng-content>

src/app/shared/components/copy-button/copy-button.component.ts

@@ -8,13 +8,13 @@ import { BehaviorSubject, take, timer } from 'rxjs';
 })
 export class CopyButtonComponent {
   public elRef = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>);
-  public buttonText = new BehaviorSubject<string>('Copy');
+  public buttonIcon = new BehaviorSubject<string>('content_copy');
 
 
   onCopy() {
-    this.buttonText.next('Copied!');
+    this.buttonIcon.next('check');
     timer(2000).pipe(take(1)).subscribe(() => {
-      this.buttonText.next('Copy');
+      this.buttonIcon.next('content_copy');
     });
   }
 }

src/app/shared/shared.module.ts

@@ -14,9 +14,10 @@ import { HeaderAnchorDirective } from './directives/header-anchor.directive';
 import { ExtensionPipe } from './pipes/extension.pipe';
 import { CopyButtonComponent } from './components/copy-button/copy-button.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
-  imports: [CommonModule, ClipboardModule],
+  imports: [CommonModule, ClipboardModule, MatIconModule],
   declarations: [
     ExtensionPipe,
     TabsComponent,
@@ -43,7 +44,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
     ThemeModeToggleComponent,
-    CopyButtonComponent,
+    CopyButtonComponent
   ],
   providers: [StorageService],
 })