feat(demo): add export to clipboard button

apps/demo/src/app/config/config.component.html

@@ -88,6 +88,15 @@
         <mat-slide-toggle formControlName="responsive" color="primary"
           >Responsive</mat-slide-toggle
         >
+        <button
+          mat-stroked-button
+          color="primary"
+          aria-label="Button to export star layers"
+          (click)="exportLayers()"
+        >
+          <mat-icon>content_copy</mat-icon>
+          Copy to clipboard
+        </button>
       </div>
     </div>
   </mat-card-content>

apps/demo/src/app/config/config.component.scss

@@ -35,9 +35,10 @@
 }
 
 .others-form {
-  border-top: 1px solid black;
+  align-items: center;
+  border-top: 1px solid lightgrey;
   display: flex;
-  justify-items: start;
+  justify-content: space-between;
   padding: 1rem 0;
   width: 100%;
 }

apps/demo/src/app/config/config.component.ts

@@ -17,6 +17,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { ConfigForm } from './config-form';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { Clipboard } from '@angular/cdk/clipboard';
 
 @Component({
   selector: 'ngx-parallax-stars-config',
@@ -41,7 +42,10 @@ export class ConfigComponent implements OnInit {
 
   @Output() configChanged = new EventEmitter<ConfigForm>();
 
-  constructor(private fb: NonNullableFormBuilder) {
+  constructor(
+    private fb: NonNullableFormBuilder,
+    private clipboard: Clipboard
+  ) {
     this.form = this.buildForm();
   }
 
@@ -98,6 +102,11 @@ export class ConfigComponent implements OnInit {
     this.registerFormChanges();
   }
 
+  exportLayers(): void {
+    const layers = JSON.stringify(this.layers.getRawValue());
+    this.clipboard.copy(layers);
+  }
+
   private registerFormChanges(): void {
     this.form.valueChanges
       .pipe(

apps/demo/src/app/main/main.component.scss

@@ -1,6 +1,5 @@
 :host {
   display: grid;
-
   --margin: 3rem;
 }
 

apps/demo/src/app/mouse-highlighter/mouse-highlighter.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -8,10 +8,10 @@ import { CommonModule } from '@angular/common';
   templateUrl: './mouse-highlighter.component.html',
   styleUrls: ['./mouse-highlighter.component.scss'],
 })
-export class MouseHighlighterComponent implements OnInit {
+export class MouseHighlighterComponent implements AfterViewInit {
   constructor(private element: ElementRef) {}
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
     document.body.addEventListener('mousemove', (e: MouseEvent) => {
       this.element.nativeElement.style.top = `${e.y}px`;
       this.element.nativeElement.style.left = `${e.x}px`;