Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
George Anderson
Frontend and backend development guru, lover of all things computer... and cats! Hopes to make your coder life a breeze by sharing some tips and tricks of the trade.
Posted on Jul 30th 2019
One of the things that Angular team has made easy is the possibility to create Angular libraries. On the off chance that you’ve at any point attempted to do it previously, you realize that it was not really a straightforward task.

What You Will Learn

In this article, you will learn about Angular application development using Angular IDE. You will also learn how to create a library that provides a service, a component, and some interfaces.

The library will work with data provided by tvmaze.com API, with TVmaze you can track your favorite shows, so using its API we can obtain information on our desired TV shows. We’ll be naming our library Flixtime.

Prerequisites

  • For this tutorial, you can download and install Angular IDE.
  • However, if you already have an Eclipse installation you are happy with, add Angular IDE to it from the Eclipse marketplace.
  • If you already have CodeMix installed, simply ensure you have the Angular extension Pack installed from the Extension Manager at Help > CodeMix Extensions.

Optimize your Angular development with Angular IDE powered by CodeMix. If you’re new to Angular, use our new eLearning infrastructure to easily build an Angular front end, using Angular features along the way to make the job easier. The eLearning infrastructure provides you interesting examples on how to get started on the technologies supported on CodeMix.

Creating a New Angular Library Project

Open Angular IDE, click File in the top menu, then select, New then click Angular Project. Now you will see the new Angular project wizard, where you can select the Node.js, NPM and Angular CLI versions.

In the new Angular project wizard, enter Flixtime and select no initial application, as shown below:



Angular IDE will take a few minutes to set up the project, you can see the activities output in Terminal+. Now we will create a library within the project we created earlier, as shown below:



Our folder structure like below:



A new "projects" directory was created, with "flixtime" folder inside.

Dealing with the API

Our API request will look like this: https://api.tvmaze.com/shows/1. We will now create a file inside projects/flixtime/src/lib/flixtime.models.ts with all the interfaces with the content below:

Replace the code of flixtime.service.ts as below:

Services are one of the fundamental blocks of every Angular application. They are used when dealing with APIs. In the code snippet above we are defining provideIn: root configuration in the @Injectable decorator.

provideIn: root allows to provide a service without explicitly registering it in any NgModule.

Creating a Component for our Library

Our library will allow developers to display a the Image of the movie, we will now create a Component called image as Shown below:



Replace the code of image.component.ts with the following code:

We have to make the component available outside the lib’s flixtime.module, we need to add it to the exports section. your code should look like as shown below:

Building the library!

Before we can use our library, we need to build it. in the opened terminal+ execute the following command as shown below:

Creating an Angular Application

Now, we will create an application within the Angular work-space, follow the steps as shown below:



Our folder structure should look like the picture below:

Using the library

To use the library we first need to import it. In src/app/app.module.ts add the Flixtime to the imports. The import of the module should look like:

Replace the code of app/src/app.component.ts with the following:

Run application

Run the application from the server tab of Angular IDE as shown below:



This should be the result:

Conclusion

In this article, we have learned how to make a Library on Angular from scratch and made an App to use the Library we just made. Also, we have learned how to work with the data obtained from an API, all of this using Angular IDE.

Source code will be available soon, please check back for updates here.