added data service, used but list component

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ColorCardComponent } from './color-card/color-card.component';
 import { ColorListComponent } from './color-list/color-list.component';
+import { DataService } from './data.service';
 
 @NgModule({
   declarations: [
@@ -16,7 +17,7 @@ import { ColorListComponent } from './color-list/color-list.component';
     BrowserModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [DataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/color-card/color-card.component.html

@@ -2,3 +2,6 @@
     <p>{{cause}}</p>
     <p>{{htmlcolor}}</p>
 </div>
+
+
+

src/app/color-list/color-list.component.ts

@@ -1,10 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, OnInit  } from '@angular/core';
+import { DataService } from './../data.service'
 
 @Component({
   selector: 'app-color-list',
   templateUrl: './color-list.component.html',
   styleUrls: ['./color-list.component.css']
 })
 export class ColorListComponent {
-  list: {"cause":string, "htmlcolor":string}[] =[{"cause":"Breast Cancer","htmlcolor":"pink"},{"cause":"Birth Parents","htmlcolor":"pink"},{"cause":"Nursing Mothers","htmlcolor":"pink"}]
+  constructor(private data: DataService) { }
+
+  list = this.data.getList()
+
+
 }

src/app/data.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+  let service: DataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/data.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import data from '../assets/data.json'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+
+  constructor() { }
+  getList(){
+    return data
+  }
+}

tsconfig.json

@@ -18,6 +18,8 @@
     "importHelpers": true,
     "target": "es2020",
     "module": "es2020",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
     "lib": [
       "es2020",
       "dom"