Skip to Content
Author's profile photo Philipp Reisinger

How to connect SAP Gateway OData source with Angular


Learn how to build an basic Angular 4+ app from scratch and easily connect it with your most loved SAP Gateway OData Sources.

While SAP UI5 is SAP’s recommended client side framework for developing business applications, Gateway OData Services can be consumed by any HTML5/JavaScript based framework. In this tutorial we’ll develop a small OData consuming Angular app. We’ll solely use open source based components.


If you haven’t installed yet, there are some handy dev tools which help to proceed:

  • VS Code A source code editor, I am very satisfied with.
  • Node.js (it’s the big green button to install) Node.js is a JavaScript runtime on your local machine. Basically we need it to run our development environment. Node comes along with npm – a package manager for javascript.
    Check the installation entering in you Terminal:

    node -v

    It should tell you some Version 6.9.0 or higher.
    Tip: VS Code embeds a Terminal window, which is quite comfortable to use.

  • angular-cli is a great way to start an Angular project. This command line tool helps a lot to start from scratch. Please install using npm:
    npm install -g @angular/cli​


  • OData Service Provider: In this tutorial we are going to access to the Gateway Demo System (ES4) So you might  create an account on the Gateway Demo system and keep your username & password for later.


Step 1: Create an Angular project

Create a new, empty folder in you file system. Within this folder create the new project:

ng new say-hello-to-gateway

The cli creates the basic folder structure for our app. Besides that, it installs a bunch of packages for tooling such as the actual angular framework components. (Everything here is installed within this folder)



Step 2: Install ngx-o-table

ngx-o-table is an Angular 4+ table module displaying OData entities.

It lets us easily create metadata driven tables showing our data.

To install ngx-o-table, npm is our best friend again. From the root folder say:

npm install ngx-o-table --save

Step 3: Import the ngx-o-table module

In order to actually use the previous installed module, we need to import it in our app first.

Open the main module  ./src/app/app.module.ts in the code editor of your choice and make the following additions:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { OtableModule } from 'ngx-o-table'; //<-- 1. add this line

  declarations: [
  imports: [
    OtableModule //<-- 2. add this line
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


Step 4: Adding some HTML

Change the file app.component.html to the following:

    [serviceUrl]="'/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/'" >


Step 5: Test the app – but wait!

Our app runs locally and makes calls to the cross domain origin

Here we would run into conflicts concerning the browsers Same-origin policy.

Fortunately, Ng CLI has a nifty feature to solve this issue:

In the projects root folder create the following the file:


  "/sap/*": {
    "target": "",
    "secure": false


With this proxy configuration, start the ng dev server:

ng serve --proxy-config proxy.conf.json


Step 6: Say hello to Gateway!


Open your browser, head to localhost:4200/ , enter password & username from above and enjoy the result:


You are not satisfied with the layout, row captures or the weird date format?

Fortunately, ngx-o-table has already some experimental re-formatting features on board  – more in a subsequent blog post, if you like.

This tutorial is indented to give you an idea how an SAP Gateway OData <-> Angular interaction could work. You are very welcome to share your thoughts or even contribute to the project on GitHub.




Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo John Patterson
      John Patterson

      nice one

      observables + generics + OData  === developer productivity

      I really like RxJS, would love to see UI5 ODataModel return an observable like Angular http.get, cant cancel promises.


      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez

      Nice job.


      I'm working on a project with angular 4 + odata metadata information and your post is very usefull in my case, thanks.


      Best regards,



      Author's profile photo Philipp Reisinger
      Philipp Reisinger
      Blog Post Author

      Thanks for feedback - thats what oss devs striving for 😉

      Just for curiosity: what is your project about?


      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez

      My project is similar to your approach but in my case i'm trying to add filters and optios for sort. Something similar to SE16n for oDatas using angular.



      Author's profile photo Former Member
      Former Member

      Hi Philipp,

      nice job!

      But is there an option to set filter on the entity set ? For example I need to get data , not for all warehouses, but for a single one.

      ULR look something like that : https://**************/sap/opu/odata/sap/**********/WorkcenterSet?$filter=lgnum%20eq%20%27GREW%27


      Author's profile photo Philipp Reisinger
      Philipp Reisinger
      Blog Post Author

      though there are some experimental features concerning formatting, filters filter/sort/search options are not implemented at this stage of the project.

      I can see those features essential for wider use. Probably I do them in a future release.

      btw your are very welcome to contribute to the project on GitHub


      Author's profile photo Former Member
      Former Member

      Hi Phillip,


      thanks for reply. Would love to when i get a bit more angular knowleadge. Just started using it : ).




      Author's profile photo Former Member
      Former Member

      Hey  Philipp, could you please elaborate how can I use your service to query an SAP server with the service built in your ngx-odata repo. I wish to use your ngx-odata repo (its service only) and use my own UI component. Much appreciated ?

      Author's profile photo Philipp Reisinger
      Philipp Reisinger
      Blog Post Author

      i've just exposed the service as pls. chk out and let me know