Integration

**test.interface.ts=>**
export interface TEST {
    _id: string;
    title?: string;
    description?: string;
    features?:any;
  }

**test.db.json=>**
{
  "data": [
    {
      "_id": "1",
      "title": "Handoff to developers",
      "description": "one .....Lorem ipsum dolor sit amet. At nostrum tempore sit omnis animi et velit officiis et fugiat repellat ut dignissimos odio rem sequi vitae. Qui quae quos aut minus aliquam qui beatae debitis ut ratione harum.",
      "features": [
        "Budgeting",
        "Sales & support",
        "Budget Friendly",
        "Maintainance"
      ]
    },
    {
      "_id": "2",
      "title": "Handoff to developers",
      "description": "Lorem ipsum dolor sit amet. At nostrum tempore sit omnis animi et velit officiis et fugiat repellat ut dignissimos odio rem sequi vitae. Qui quae quos aut minus aliquam qui beatae debitis ut ratione harum.",
      "features": [
        "Budgeting",
        "Sales & support",
        "Budget Friendly",
        "Maintainance"
      ]
    }
  ]
}

**test.service.ts=>**
import {inject, Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { TEST } from '../../interfaces/common/test.interface';

const API_URL = '../../../../json/';


@Injectable({
  providedIn: 'root'
})
export class TestService {

  // Inject
  private readonly httpClient = inject(HttpClient);


  /**
   * getAllFeatures()
   */

  getAllFaq() {
    return this.httpClient.get<{ data: TEST[], success: boolean }>(API_URL + 'test.db.json');
  }

}


**test.component.ts=>**
import { Component, inject } from '@angular/core';
import { TEST } from '../../interfaces/common/test.interface';
import { TestService } from '../../services/common/test.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss',
})
export class TestComponent {

  // Stored Data
  test: TEST[] = [];

  // Inject
  private readonly testService = inject(TestService);

  // Subscriptions
  private subDataGet: Subscription;

  ngOnInit() {
    // Base data
    this.getAllTest();
  }

  /**
   * HTTP Client
   * getAllFeatures()
   */
  private getAllTest() {
    this.subDataGet = this.testService.getAllFaq().subscribe({
      next: (res) => {
        this.test = res.data;
        console.log('===> ', this.test);
      },
      error: (err) => {
        console.log(err);
      },
    });
  }

  ngOnDestroy() {
    if (this.subDataGet) {
      this.subDataGet.unsubscribe();
    }
  }
}

**test.component.html=>**
import { Component, inject } from '@angular/core';
import { TEST } from '../../interfaces/common/test.interface';
import { TestService } from '../../services/common/test.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss',
})
export class TestComponent {

  // Stored Data
  test: TEST[] = [];

  // Inject
  private readonly testService = inject(TestService);

  // Subscriptions
  private subDataGet: Subscription;

  ngOnInit() {
    // Base data
    this.getAllTest();
  }

  /**
   * HTTP Client
   * getAllFeatures()
   */
  private getAllTest() {
    this.subDataGet = this.testService.getAllFaq().subscribe({
      next: (res) => {
        this.test = res.data;
        console.log('===> ', this.test);
      },
      error: (err) => {
        console.log(err);
      },
    });
  }

  ngOnDestroy() {
    if (this.subDataGet) {
      this.subDataGet.unsubscribe();
    }
  }
}