Create a Library Finder App in Angular: LibraryListComponent and LibraryDetailsComponent

In the previous tutorial of our series, we completed the creation of our HomeComponent and started working on the LibraryListComponent. While the HomeComponent allowed the users to enter the name of any library and search for it, the LibraryListComponent provided a list of libraries which matched the given search term.

• 
  Angular
  
  
  Create a Library Finder App in Angular: HomeComponent and LibraryListComponent
  
  
  Monty Shokeen

So far, we have only written the logic of our LibraryListComponent—we still need to update the HTML template and CSS files to make this component useful. In this tutorial, we will update the remaining files of our LibraryListComponent and also create the LibraryDetailsComponent in its entirety.

Creating the LibraryListComponent Template

If you read the previous tutorial, you might remember that we stored the data of individual libraries as objects in separate array elements. Since we plan to show all these results to our users, we need to use the *ngFor repeater directive to go over the whole list and render them inside the LibraryListComponent.

Each library will have its own containing div block with the name of the library rendered inside h4 tags. At the bottom of each library, there is a link which takes users to the details page of that library. All these elements are wrapped inside a container div with a fixed width of 800 px.

<div class="container">
  <div *ngFor="let library of libraries" class="library-unit">
    <div class="library-block">
      <h4>{{library.name}}</h4>
      <p><span class="title">Version:</span> <span class="detail">{{library.version}}</span></p>
      <p><span class="title">Description:</span> <span class="detail">{{library.description}}</span></p>
      <a class="see-more" routerLink="/detail/{{library.name}}">See More Details</a>
    </div>
  </div>
</div>

Here is the CSS that I have used to style the elements inside the LibraryListComponent template. I have added a top border on each library unit so that they look separate from each other. You can use another technique to separate them:

div.container {
    width: 800px;
    margin: 20px auto;
}

div.library-unit {
    border-top: 1px solid #ccc;
    padding-top: 20px;
}


h4 {
    font-family: 'Lato';
    font-size: 1.75em;
    color: green;
    margin: 0;
}

p {
    font-family: 'Lato';
    font-size: 1.2em;
    color: black;
    font-weight: 300;
    margin: 10px 0;
}

p span.title {
    color: blue;
    width: 250px;
    display: inline-block;
    vertical-align: top;
}

p span.detail {
    width: 500px;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1.7;
}

a.see-more {
    text-decoration: none;
    background: orange;
    color: white;
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 10px;
    font-family: 'Lato';
}

Creating the LibraryDetailsComponent

The LibraryDetailsComponent is the last component of our app. To quickly generate all the necessary files, move to your project directory and run the following command from the console.

ng generate component library-details

This will create a folder called library-details in the root directory of your app with four files in it. We only need to be concerned with the three files named library-details.component.ts, library-details.component.html, and library-details.component.css.

Let's begin editing the library-details.component.ts file first. It will contain all the logic of our component. Just like LibraryListComponent, we begin by importing different dependencies.

One additional dependency that we will import is Location. It allows us to interact with the browser's URL. We will be using it to allow our readers to go back to the previous page by clicking on the back button inside our LibraryDetailsComponent. If they arrived here through the LibraryListComponent, they will be taken back to the list of libraries. If they arrived here by clicking on any of the popular libraries on the HomeComponent, they will be taken back to HomeComponent.

Inside the LibraryDetailsComponent class definition, we declare a bunch of properties to store information like the latest version, description, homepage, license, etc. All these have been initialized with a value of "Loading...". This value will be updated as soon as we get back the data about a particular library.

We call the getLibrary() method of our LibraryDetailsComponent upon initialization so that the relevant values can be populated as quickly as possible. Here is the complete code of our library-details.component.ts file:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { LibraryService } from '../library.service';

@Component({
  selector: 'app-library-details',
  templateUrl: './library-details.component.html',
  styleUrls: ['./library-details.component.css']
})

export class LibraryDetailsComponent implements OnInit {
  name = 'Loading...';
  version = 'Loading...';
  description = 'Loading...';
  homepage = 'Loading...';
  repository = 'Loading...';
  license = 'Loading...';

  constructor(
    private route: ActivatedRoute,
    private libraryService: LibraryService,
    private location: Location
  ) { }

  ngOnInit() {
    this.getLibrary();
  }

  getLibrary(): void {
    const library: string = this.route.snapshot.paramMap.get('library');
    this.libraryService.showLibrary(library)
      .then((res: any) => {
        this.name = res.name;
        this.version = res.version;
        this.description = res.description;
        this.homepage = res.homepage;
        this.repository = res.repository.url;
        this.license = res.license;
      });
  }

  goBack(): void {
    this.location.back();
  }

}

Creating the LibraryDetailsComponent Template and Stylesheet

We have already stored all the information about a library in different variables, so displaying it to users will be easy now. I have used additional span tags in the template to show the information to users. This allowed me to properly align these values with ease. Here is the code for the library-details.component.html file:

<div class="container">
  <p>
    <span class="title">Name of the Library:</span> <span class="detail">{{name}}</span></p>
  <p>
    <span class="title">Latest Version:</span> <span class="detail">{{version}}</span></p>
  <p>
    <span class="title">Description:</span> <span class="detail">{{description}}</span></p>
  <p>
    <span class="title">Homepage:</span> <span class="detail"><a href="{{homepage}}">{{homepage}}</a></span></p>
  <p>
    <span class="title">Repository:</span> <span class="detail"><a href="{{repository}}">{{repository}}</a></span></p>
  <p>
    <span class="title">License:</span> <span class="detail">{{license}}</span></p>
  <button (click)="goBack()">Go Back</button>
</div>

Just like other components, I have wrapped all the elements inside a container div this time as well.

We will set the width of all span elements with the title class to have a fixed width of 250 px. This way, the details of the library will be aligned properly. Here is the CSS that needs to go inside our library-details.component.css file:

div.container {
  width: 800px;
  margin: 20px auto;
}

p {
  font-family: 'Lato';
  font-size: 1.4em;
  color: black;
}

p span.title {
  color: blue;
  width: 250px;
  display: inline-block;
  vertical-align: top;
}

p span.detail {
  width: 500px;
  display: inline-block;
  font-size: 0.9em;
  line-height: 1.7;
}

button {
  margin-top: 20px;
  font-family: 'Lato';
  font-size: 1em;
  background-color: #3A6;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  color: white;
  font-family: 'Lato';
}

Final Thoughts

We began this tutorial by updating the template and CSS file of our LibraryListComponent. After that, we moved on to the LibraryDetailsComponent and learned how to display all the information about a particular library to our users. After completing all the four tutorials in this series, you should now have a working library finder app. 

The fastest way to learn Angular is to do something all by yourself. Keeping this in mind, you should try making some changes to this app. For instance, you could limit LibraryListComponent to only showing the first 20 or so results, or sort those results based on the name of the library, etc. We did something similar in our first Angular app series. Combining the knowledge of both these series should help you make these changes with ease.

I hope this series improved your understanding of Angular. If there is anything that you would like me to clarify in this tutorial, let me know in the comments.