Angular Library Tutorial

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.

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:

export interface Show {
  id: number;
  url: string;
  name: string;
  type: string;
  language: string;
  genres: string[];
  status: string;
  runtime: number;
  premiered: string;
  officialSite?: any;
  schedule: Schedule;
  rating: Rating;
  weight: number;
  network: Network;
  webChannel?: any;
  externals: Externals;
  image: Image;
  summary: string;
  updated: number;
  _links: Links;
}

export interface Links {
  self: Self;
  previousepisode: Self;
}

export interface Self {
  href: string;
}

export interface Image {
  medium: string;
  original: string;
}

export interface Externals {
  tvrage: number;
  thetvdb: number;
  imdb: string;
}

export interface Network {
  id: number;
  name: string;
  country: Country;
}

export interface Country {
  name: string;
  code: string;
  timezone: string;
}

export interface Rating {
  average: number;
}

export interface Schedule {
  time: string;
  days: string[];
}

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Show } from './flixtime.models';

@Injectable({
  providedIn: 'root'
})
export class FlixtimeService {
  private readonly apiRoot = 'https://api.tvmaze.com';

  constructor(private http: HttpClient) {}

  getShow(id: number): Observable {
    const url = `${this.apiRoot}/shows/${id}`;
    return this.http.get(url);
  }
}

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:

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Show } from '../flixtime.models';
import { FlixtimeService } from '../flixtime.service';

@Component({
  selector: 'tm-image',
  template: `<img *ngIf="posterUrl$ | async as src" [src]="src" />`,

styles: [
    `
  :host {
    display: inline-block;
    overflow: hidden;
    border-radius: 4px;
    line-height: 0;
  }
  `
  ]
})
export class ImageComponent implements OnInit {
  @Input() showId: number;
  posterUrl$: Observable;

  constructor(private tvmaze: FlixtimeService) {}

  ngOnInit() {
    this.posterUrl$ = this.tvmaze
      .getShow(this.showId)
      .pipe(map(show => show.image.medium));
  }
}

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:

import { NgModule } from '@angular/core';
import { FlixtimeComponent } from './flixtime.component';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { ImageComponent } from './Image/Image.component';

@NgModule({
  declarations: [FlixtimeComponent,ImageComponent],
  imports: [CommonModule,  HttpClientModule,
  ],
  exports: [FlixtimeComponent, ImageComponent]
})
export class FlixtimeModule { }

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:

ng build

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:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FlixtimeModule } from 'flixtime';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule, FlixtimeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { FlixtimeService } from 'flixtime';
import { Show } from 'flixtime/lib/flixtime.models';

@Component({
  selector: 'app-root',
  template: `
    <tm-image [showId]="1"></tm-image>
    <pre>{{ show$  | async | json }}</pre>
  `
})
export class AppComponent {
    show$: Observable<Show>;
  constructor(private flixtime: FlixtimeService) {
    this.show$ = this.flixtime.getShow(1);
  }
}

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.

You can download the source code for this tutorial from our GitHub repository here.