Color Picker App using Angular

// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ColorPickerModule } from 'ngx-color-picker'; import { MatCardModule } from '@angular/material/card'; import { AppComponent } from './app.component'; @NgModule({  declarations: [  AppComponent  ],  imports: [  BrowserModule,  ColorPickerModule,  MatCardModule  ],  providers: [],  bootstrap: [AppComponent] }) export class AppModule { } 

// app.component.ts import { Component } from '@angular/core'; import { ColorPickerService } from 'ngx-color-picker'; @Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css'] }) export class AppComponent {  public title: string = 'color-picker-app';  public selectedColor: string = '#e45a33';  constructor(private cpService: ColorPickerService) { }  public onColorChange(color: string): void {  this.selectedColor = color;  } } 

// app.component.spec.ts import { TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => {  beforeEach(() => TestBed.configureTestingModule({  imports: [RouterTestingModule],  declarations: [AppComponent]  }));  it('should create the app', () => {  const fixture = TestBed.createComponent(AppComponent);  const app = fixture.componentInstance;  expect(app).toBeTruthy();  });  it(`should have as title 'color-picker-app'`, () => {  const fixture = TestBed.createComponent(AppComponent);  const app = fixture.componentInstance;  expect(app.title).toEqual('color-picker-app');  });  it('should render title', () => {  const fixture = TestBed.createComponent(AppComponent);  fixture.detectChanges();  const compiled = fixture.nativeElement as HTMLElement;  expect(compiled.querySelector('.content span')?.textContent).  toContain('color-picker-app app is running!');  }); });