DEV Community

Steve Hetzel
Steve Hetzel

Posted on

To Do app with Angular 10 and InvokeDB

Alt Text


This article walks through setting up an InvokeDB table and connecting it to an angular application. Click here to see a full example of the To Do application.

InvokeDB is a simple NoSQL database with built in API endpoints when tables are created. We can use this to store our to do list items.


  1. Create an InvokeDB account
  2. Install the Angular CLI


Set up ToDo table in InvokeDB

  1. Login to your account at
  2. Click the + icon and select Empty Table Alt Text
  3. Name the table ToDo
  4. Edit the table so that you have 2 string columns with the following names
    • name
    • isComplete

The table is now setup, you can view available API endpoints by clicking the API button in the top right of the table.

Your table should look like this
Alt Text

Calling the ToDo table from Angular

The samples below will show how to send a request to the Get and Search endpoints for the To Do table.

Retrieve your api token from

Set the following 2 variables

const BASE_URL = '';
const API_KEY = 'your api key';

InvokeDB requires the api key to be sent as a Bearer token. So we'll create a helper method to return an Authorization header.

getHeaders() {
  return new HttpHeaders().set('Authorization', `Bearer ${API_KEY}`);

Create a getRows() method to call InvokeDB

getRows(table: string, params: any, filter?: any) {
  const { skip, limit } = params;
  const urlQuery = `table=${table}&skip=${skip}&limit=${limit}`;
  const headers = this.getHeaders();

  return filter
    ?`${BASE_URL}/search?${urlQuery}`, filter, { headers })
    : this.http.get(`${BASE_URL}/get?${urlQuery}`, { headers });

Create the getItems() method

getItems(showCompleted = true) {
  const params = {
    skip: 0,
    limit: 200

  let filter;

  if (!showCompleted) {
    filter = {
      isComplete: {
        value: 'no',
        type: 'equals'

  return this.invokedb
    .getRows('todo', params, filter)
    .pipe(map((res: any) =>;

Assuming the above code was put into a service, you can now use the following code to query the todo items stored in the table.

  .subscribe(items => (this.items = items));

Top comments (0)