API 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();
    }
  }
}
`