How to make a Library on Angular from scratch

How to make a Library on Angular from scratch

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.

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.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about AngularJS

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

MEAN Stack Angular 8 CRUD Web Application

How to build a CRUD Web App with Angular 8.0

MEAN Stack Tutorial MongoDB, ExpressJS, AngularJS and NodeJS

angular web-development javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...