Create a Library Finder App in Angular: HomeComponent and LibraryListComponent

In one of my previous Angular tutorial series, I covered the basics of Angular, starting from installing the CLI and then discussing how to create basic components and implement routing. Check out my post on Creating Your First Angular App: Basics, for a refresher on installing the Angular CLI and other recommended tools to create an Angular app with ease.

• 
  Angular
  Creating Your First Angular App: Basics
  Monty Shokeen

The country information app that we created in that series was good for getting started with Angular, but it lacked a few features. For example, we stored the information that we wanted to display to our users inside an array. However, in this tutorial, we will move beyond a small set of data and let users search the library database available from CDNJS.

Here’s the app we’ll be building:

In the previous post, we created a LibraryService class to get information about different libraries using the CDNJS API. We also created an app-routing.module.ts file to provide all the routing logic for our app.

In the routing logic, you might have noticed that we tell Angular to render the HomeComponent when users are on the homepage of our app. Similarly, we tell Angular to render the LibraryListComponent when users click on the List All Libraries button after typing something in the input field.

In this tutorial, we will create these two components for our Angular app. We will create the HomeComponent first and then create the LibraryListComponent later.

Creating the HomeComponent Class

To create the HomeComponent files using the Angular CLI, move to the directory of the library-finder app in the console. After that, run the following command:

ng generate component home

This will create a folder named home inside the root directory of our library finder app. This folder will have four different files. Three of these files should be named home.component.css, home.component.html, and home.component.ts.

The HTML file will contain the template code for HomeComponent, and the CSS file will contain the style information for that template. The TypeScript file will contain the logic of our HomeComponent.

Here is the code for the home.component.ts file:

import { Component } from '@angular/core';

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  searchTerm = '';
  libraryName = '';

  constructor(private libraryService: LibraryService) { }

  updateTerm(event: any): void {
    this.searchTerm = event.target.value;
  }

  updateName(event: any): void {
    this.libraryName = event.target.value;
  }

}

If you read the creating your first Angular app series, you might have noticed that the HomeComponent we created in the second tutorial of that series had imported the OnInit module from the Angular core. We also initialized the values of different properties in that class inside the ngOnInit() method.

No such module has been imported this time because the HomeComponent is not getting or setting any values during initialization. Other than that, most other things are done in a similar manner.

We begin by importing the LibraryService class that we created earlier. After that, we set the value of the selector, templateUrl, and styleUrls inside the component decorator. Remember that you can provide multiple stylesheets to style a component but only a single template file to render it.

Inside the HomeComponent class definition, we define two properties called searchTerm and libraryName. The values of both these properties are set to an empty string by default. These values are updated inside the updateTerm() and updateName() methods when users type something in the respective input field.

Creating the HomeComponent Template

Our HomeComponent will have two input fields and two links that will act like buttons and take users to different paths. The input fields will listen to a keyup event and update the values of the searchTerm and libraryName properties accordingly.

The two links beside the input fields take users to different paths using the routerLink directive. In the first case, the users go to /list/{{searchTerm}}, and in the second case, they go to /detail/{{libraryName}}. The path is updated dynamically based on the current value of the input field. For instance, the path becomes /list/bootstrap when someone types bootstrap in the first input field, and it becomes /detail/jquery when someone types jquery in the second input field.

Here is the complete code for our home.component.html file:

  

    
    List All Libraries
  
  

  

    
    Show Library Details
  
  

  
Popular Libraries
  
jQuery
  
Chart.js
  
SweetAlert

We have also created three different boxes to list the names of some popular libraries. Users will be able to directly view the details of these libraries instead of first typing out their names and then clicking on the Show Library button.

All these elements have been wrapped inside a container div element to group them together for styling.

Creating the HomeComponent CSS File

After writing the component logic and creating the template file, we just have to update the CSS file to make our HomeComponent presentable.

Here is the CSS that I have used to style different elements inside the template file. You can change all the style rules here based on your own preferences.

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

h3 {
  font-size: 1.5em;
  text-align: center;
  color: #666;
  font-family: 'Lato';
}

a.simple {
  background: white;
  color: black;
  border: 1px solid black;
  padding: 5px 10px;
  font-size: 1.3rem;
  font-family: 'Lato';
  font-weight: 300;
  border-radius: 5px;
  text-decoration: none;
  width: 200px;
  display: inline-block;
  text-align: center;
}

input {
  border: none;
  border-bottom: 2px solid #00ccff;
  font-size: 1.5rem;
  outline: none;
  font-family: 'Lato';
  font-weight: 300;
  margin-right: 100px;
  width: 450px;
}

input:focus {
  border-bottom: 2px solid #ccff00;
}

div.library-box {
  font-family: 'Lato';
  color: white;
  background: purple;
  width: 200px;
  height: 70px;
  text-align: center;
  padding-top: 30px;
  font-size: 2em;
  border-radius: 4px;
  display: inline-block;
  margin: 20px;
}

div.library-box:hover {
  background: black;
  cursor: pointer;
}

Everything in the CSS file is self-explanatory. We set the width of our wrapper div equal to a fixed 800 px value. The bottom boxes with the names of popular libraries change their background color to black when users hover over them.

Creating the LibraryListComponent Class

As I mentioned earlier, the LibraryListComponent will be used to list all the libraries which contain the search term extracted from the current path. You can quickly generate all the necessary files for this component by executing the following statement on the command line:

ng generate component library-list

Just like our home component, this command will create a folder called library-list in the root directory. There will be four files inside the folder, but we need to worry about only three of them: library-list.component.css, library-list.component.html, and library-list.component.ts.

We will try to get the list of libraries related to the search term provided in the URL as soon as the component loads. This means that we will also have to import OnInit along with Component from @angular/core.

Importing ActivatedRoute allows us to work with all the information of a route associated with the currently loaded component. This way, we can easily extract the search term from the current path. After importing different dependencies from Angular, we go ahead and import our LibraryService class.

As usual, the component decorator stores the value of the selector, template URL, and stylesheet paths for LibraryListComponent.

Inside the ngOnInit() method, we call the getLibrary() method. The getLibrary() method further uses the searchLibraries() method from LibraryService to get all our results. These results are then stored inside the libraries array declared at the top of our class definition.

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

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

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

export class LibraryListComponent implements OnInit {

  libraries = [];

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

  ngOnInit() {
    this.getLibrary();
  }


  getLibrary(): void {
    const library: string = this.route.snapshot.paramMap.get('search');
    this.libraryService.searchLibraries(library)
      .then((data: any) => {
        data.results.forEach(function (result) {
          this.libraries.push({ 'name': result.name, 'version': result.version, 'description': result.description });
        }, this);
      });
  }
}

Final Thoughts

In this tutorial, we successfully created the HomeComponent of our library finder app. This will allow users to search for different libraries in the CDNJS database. The HomeComponent is not very useful by itself. So we will create two more components called LibraryListComponent and LibraryDetailsComponent.

We have already updated the TypeScript file for our LibraryListComponent. We will update the HTML template and CSS files in the next tutorial. If you have any questions related to this tutorial, let me know in the comments.