Data API Builder (DAB) with Angular Frontend

Data API builder replaces any custom API performing CRUD operations against a database. DAB is cross-platform, open-source, and independent of language, technology, and and frameworks.

---

Effortlessly Expose Your Database as REST & GraphQL APIs

📌 Introduction

Building APIs for web applications traditionally requires setting up backend logic, routes, and controllers. But what if you could expose your database directly as an API without writing backend code?

Data API Builder (DAB) allows you to automatically create REST and GraphQL APIs from your database, reducing backend development time.

In this article, we'll explore how to use DAB to expose a database and connect it to an Angular frontend for fetching and displaying data dynamically.

---

📖 What is Data API Builder (DAB)?

DAB is a tool from Microsoft that helps developers quickly generate APIs from an existing database without requiring additional backend code. It supports:

✅ Multiple Databases – SQL Server, PostgreSQL, MySQL, and Cosmos DB
✅ REST & GraphQL APIs – No need for separate API development
✅ Built-in Security – Role-based access control
✅ Minimal Configuration – Just a simple JSON config file

By using DAB, we eliminate the need to build backend logic, reducing time spent on API development.

---

🔑 Key Features

• Support for NoSQL collections

• Support for relational tables, views, and stored procedures

• Support multiple, simultaneous data sources

• Support for authentication via OAuth2/JWT

• Support for EasyAuth and Microsoft Entra Identity

• Role-based authorization using received claims

• Item-level security via policy expressions

• REST endpoints

  • POST, GET, PUT, PATCH, DELETE

  • Filtering, sorting, and pagination

  • In-memory cache

  • Support for OpenAPI

• GraphQL endpoints

  • Queries and mutations

  • Filtering, sorting and pagination

  • Relationship navigation

  • Dynamic schemas

• Easy development via dedicated CLI

• Integration for Static Web Apps via Database Connection

• Open Source & free

---

⚙️ Setting Up Data API Builder

Step 1️⃣: Install DAB

DAB is available as a standalone tool. Install it using:

dotnet tool install --global Microsoft.DataApiBuilder

Verify installation:

dab --version

---

Step 2️⃣: Initialize DAB for Your Database

Navigate to your project folder and initialize DAB:

dab init --database-type "mssql" --connection-string "Server=(LocalDB)\\MSSQLLocalDB;Database=DB_Name;Trusted_Connection=True;"

This creates a dab-config.json file, which defines how your database is exposed as an API.

---

Step 3️⃣: Configure Entities in DAB

Modify dab-config.json to expose the IncomeExpense table.

{
  "data-source": {
    "database-type": "mssql",
    "connection-string": "Server=(LocalDB)\\MSSQLLocalDB;Database=DB_Name;Trusted_Connection=True;"
  },
  "runtime": {
    "rest": true,
    "graphql": true,
    "cors": {
      "origins": ["http://localhost:4200"],
      "allow-credentials": true
    }
  },
  "entities": {
    "IncomeExpense": {
      "source": "IncomeExpense",
      "permissions": [
        {
          "role": "anonymous",
          "actions": ["read", "create", "update", "delete"]
        }
      ]
    }
  }
}

🚀 Now, the IncomeExpense table is exposed via REST & GraphQL APIs.

---

Step 4️⃣: Start DAB API

Run the following command:

dab start

Your API is now running and accessible at:

• REST API: http://localhost:5000/api/IncomeExpense

• GraphQL API: http://localhost:5000/graphql

---

Step 5️⃣: Test the API

REST API - Fetch Income & Expenses

curl http://localhost:5000/api/IncomeExpense

GraphQL Query Example

{
  IncomeExpense {
    id
    date
    amount
    type
    description
  }
}

🎯 DAB automatically handles API requests, eliminating the need for backend code.

---

🌟 Connecting Angular Frontend to Data API Builder

Now that we have a working API, let’s integrate it with an Angular frontend.

Step 1️⃣: Create an Angular Service

Create a service file: income-expense.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class IncomeExpenseService {
  private apiUrl = 'http://localhost:5000/api/IncomeExpense';

  constructor(private http: HttpClient) {}

  getIncomeExpenses(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }

  addIncomeExpense(record: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, record);
  }
}

---

Step 2️⃣: Fetch Data in an Angular Component

Modify income-expense.component.ts:

import { Component, OnInit } from '@angular/core';
import { IncomeExpenseService } from '../services/income-expense.service';

@Component({
  selector: 'app-income-expense',
  templateUrl: './income-expense.component.html'
})
export class IncomeExpenseComponent implements OnInit {
  incomeExpenses: any[] = [];

  constructor(private incomeExpenseService: IncomeExpenseService) {}

  ngOnInit() {
    this.incomeExpenseService.getIncomeExpenses().subscribe(data => {
      this.incomeExpenses = data;
    });
  }
}

---

Step 3️⃣: Display Data in HTML Template

Modify income-expense.component.html:

<h2>Income & Expenses</h2>
<table>
  <tr>
    <th>Date</th>
    <th>Category</th>
    <th>Amount</th>
    <th>Type</th>
    <th>Description</th>
  </tr>
  <tr *ngFor="let record of incomeExpenses">
    <td>{{ record.date }}</td>
    <td>{{ record.categoryId }}</td>
    <td>{{ record.amount }}</td>
    <td>{{ record.type }}</td>
    <td>{{ record.description }}</td>
  </tr>
</table>

---

🎯 Why Use Data API Builder?

🚀 Saves time – No need to write backend controllers
🚀 Auto-generates REST & GraphQL APIs – Instant API access
🚀 Role-based access control – Securely manage access
🚀 Works seamlessly with Angular – Easily integrates with frontend frameworks

---

📚Documentation

• What is Data API builder ?

• Data API builder documentation

  ---

📌 Conclusion

By using Data API Builder, you can quickly expose your database as an API and focus on the frontend. This approach eliminates boilerplate API code, making development faster and more efficient

💡 Next Steps:
🔹 Try deploying DAB on Azure
🔹 Extend the API with custom roles & permissions
🔹 Connect multiple Angular components

---

Happy Reading :)

---