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.
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.
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.
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.
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 { }
Before we can use our library, we need to build it. in the opened terminal+ execute the following command as shown below:
ng build
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:
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 the application from the server tab of Angular IDE as shown below:
This should be the result:
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
☞ Angular 8 (formerly Angular 2) - The Complete Guide
☞ Angular & NodeJS - The MEAN Stack Guide
☞ The Complete Node.js Developer Course (3rd Edition)
☞ 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