Extending our Angular app with ui5 web components

On yesterday’s blog UI5 Web Components by SG, I showed a very simple Angular app where I created 2 Angular components, did navigation between them and displayed a UI5 button and a UI5 table that was populated from a local model. In a real web application, there will be more than 2 components (or views); there will be data consumed from external services (such as OData). In this blog, I would like to show an extension of the same project showcasing a few tips in Angular. The same blog can be read in spanish here

• Simplifying the import code in the app.module.ts and in the router
• Creating a reusable service
• Calling an external REST API
• The use of ng CLI

Let me begin by creating a new component (via CLI ng g c v3)  g=generate  c= component

Then let me create a services folder and an angular service via CLI also (ng g s myservice) g=generate s=service

*We will use this service on the v3 component below.

When I created the component and the service, my app.module was updated with the necessary references for my new module and as you see now I have V1Component, V2Component, V3Component, NotFoundComponent all coming from the components folder. The more components I create, the more entries there will be on the app.module file. Since I like smaller files, let me provide the first hint to minimize these repeated lines of code.

The app.module looks like this…

By doing house cleaning, I created an index.js file inside the components folder and added the export modules code (as long as you want to have them all being served from the same folder) in the app.module.ts file we will import them all together

Voilá! on line 10 below, you can see that now the 1 liner serves all the components from the same components folder.

Similarly, we can simplify the router from having multiple entries

To a single line referencing all the components as well

The next thing I would like to share is creating services. Services in Angular (and other frameworks) allow you to modularize and make reusable functions to avoid repeating the same code on multiple module, for example: navigating from a component back to the v1 (home) component, or on a more realistic scenario, calling an external web service.

Furthermore, the following step is to open the v3 component and include the service reference we created earlier. Copy the name of mysvc AND when you start to type the path to the service, VS Code provides intellisense (thank you VS code). This is also called dependency injection (DI) when you import your dependencies.

So now, let me quickly test on my browser. I opened the app, and navigated to v3.

Router works! New button shows up! And the UI5 Text Area control also is displayed with a default placeholder.

I created a local json file to show case the data populating the TextArea control, however, I received an error since I am trying to serve the app from localhost and the json file is in my same application – not found – due to the path being incorrect when calling it from localhost.

Before I try fixing the local json file, let me try a real (and free) OData service for my test. On this ODdata service, you will find different URLs that will help you test/simulate REST API calls. https://www.odata.org/odata-services/ I am using the People EntitySet.

Upon the button click, I called a function in my component, then the function called a service and from my service, I called the odata url. See the code in my git repo

I hope you were able to get the tips on how to minimize some code by bundling the components from a folder. Also, I hope you understand the value of services and how to call services from components as well as how to make get requests from an angular application. There are many other things you can do in services (POST requests, async requests, many more). I will not spoil your learning, give it a try and share your feedback. Thank you for reading this blog.