Building a Frontend Application with LoopBack4 and Angular

Photo by Domenico Loia on Unsplash

UPDATED 2021/03/19: Please note that this blog post has been converted to the documentation in LoopBack. For the most up-to-date version, see https://loopback.io/doc/en/lb4/Building-frontend-angular-application.html.

If you’re a LoopBack 4 user, you might wonder after you built your REST APIs, how you can create a frontend application. In this tutorial, I’m going to show you how to create an Angular application that calls the REST APIs we’ve created in the LoopBack todo example.

If you have a LoopBack application, feel free to follow along with the steps below. Otherwise, you can download the todo app by running:

lb4 example todo

For the complete example, you can go to my repo: https://github.com/dhmlau/loopback4-example-todo-angular.

Let’s get started!

Before You Begin

If you haven’t downloaded the Todo example already, you can do so by running the command below:

$ lb4 example todo

Step 1: Install ng-openapi-gen Node.js Module

We are going to use ng-openapi-gen Node.js module to generate the model interfaces and web service clients in the Angular application. Install this module:

$ npm install -g ng-openapi-gen

Step 2: Generate the OpenAPI Specification from the LoopBack Application

You can get the OpenAPI spec from a LoopBack application without starting the server.

Run the following command and save the output to a file.

$ npm run openapi-spec > openapi.json

Note: If you have modified the LoopBack application, remember to build the project again by running npm run build before generating the OpenAPI spec.

After the file is being generated, remove the first two lines of the output file, so that you will get a valid json file. You should see something like:

> @loopback/example-todo@3.7.4 openapi-spec /Users/myusername/loopback4-example-todo
> node ./dist/openapi-spec

Step 3: Generate an Angular Application

Assuming you have the Angular CLI installed and have some basic knowledge on Angular. If not, refer to the Angular documentation to get started.

Now, we are going to create an Angular application called loopback4-example-todo-angular.

$ ng new loopback4-example-todo-angular

Step 4: Generate Models and Web Client in the Angular Application

After the Angular application has been created, run the ng-openapi-gen command to generate the models and web client. Specify the input OpenAPI spec for the --input flag and the output folder (i.e. inside the Angular app) for the --output flag.

A sample of the command would look like:

$ ng-openapi-gen --input loopback4-example-todo/openapi.json --output loopback4-example-todo-angular/src/app/api

You will see src/app/api folder is created, where the models are under the models folder and web client under the services folder.

Step 5: Create a Todolist Component

In the Angular application, we’re going to just display the Todo list from the LoopBack app. Now, let’s modify a few things in the Angular app.

1. We are going to create a Todolist component which displays a list of the Todos coming from LoopBack Todo application.

$ ng generate component todolist

2. Update the TodolistComponent to get the todo list.

Go to the file src/app/todolist/todolist.component.ts and update as follows:

// Add these imports
import {Todo} from '../api/models/todo';
import {TodoControllerService} from '../api/services/todo-controller.service';
// ..
export class TodolistComponent implements OnInit {
  // add `todos` variable which holds the todo list 
  todos: Todo[];
  // add a todoService parameter of type TodoControllerService to the constructor
  constructor(private todoService: TodoControllerService) { }
  // update this method to get the todo list on init
  ngOnInit(): void {
     this.getTodos();
  }
  // add a new function getTodos to get the todo list from the service
  getTodos(): void {
     this.todoService.findTodos().subscribe(todos => this.todos = todos);
  }
}

3. Update the todolist.component.html to show the todo list.

<ul class="todos">
 <li *ngFor="let todo of todos">
  <span class="badge">{{todo.title}}</span> - {{todo.desc}}
 </li>
</ul>

Step 6: Update the _rootUrl in base-service.ts

Go to src/app/api/base-service.ts , modify the _rootUrl variable value to where the REST APIs can be reached. In my case, I’m running everything local at this point, so it will be:

private _rootUrl: string = 'http://localhost:3000/';

Step 7: Update app.component

We will be importing the HttpClientModule for the HTTP calls, and updating the HTML to include the todo component we created earlier.

1. In app.module.ts , add import:

import { HttpClientModule } from '@angular/common/http';

and update the @NgModule decorator as follows:

@NgModule({
  declarations: [
    AppComponent,
    TodolistComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // <----- add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})

2. In app.component.html , delete all the content and add the following:

<h1>Todo App</h1>
<app-todolist></app-todolist>

Ready to Run

You’re all set! The app is ready to go.

Make sure you have the LoopBack application running. In the Angular application, run:

ng serve --open

The browser should open with http://localhost:4200 , and you’ll see something like:

Bonus: Use Angular Material to Display the List

In my repo, I made some more changes to add Angular Material to the app and use List and Divider to make the UI look nicer. You can take a look at https://github.com/dhmlau/loopback4-example-todo-angular/blob/master/src/app/todolist/todolist.component.html to see what I’ve changed.