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></h4>
      <p><span class="title">Version:</span> <span class="detail"></span></p>
      <p><span class="title">Description:</span> <span class="detail"></span></p>
      <a class="see-more" routerLink="/detail/">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"></span></p>
  <p>
    <span class="title">Latest Version:</span> <span class="detail"></span></p>
  <p>
    <span class="title">Description:</span> <span class="detail"></span></p>
  <p>
    <span class="title">Homepage:</span> <span class="detail"><a href=""></a></span></p>
  <p>
    <span class="title">Repository:</span> <span class="detail"><a href=""></a></span></p>
  <p>
    <span class="title">License:</span> <span class="detail"></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.



from Envato Tuts+ Tutorials

Comments

Post a Comment

Popular posts from this blog

How to Build Self-Confidence: 10+ Steps to Improve Your Self-Esteem

Image
Do you have friends who can walk up to someone at a party and they’d instantly hit it off? These are the people who often get free drinks, invites to cool events, and make new friends whenever they go out. You can gain confidence in yourself and improve different aspects of your life. (Image source:  Envato Elements ) Meanwhile, there are people who feel anxious in almost every social encounter. Their first day on a job, a big company meeting, and even a housewarming party all make them feel vulnerable and unsure of themselves. Questions like the following often spring to mind during these events:  “ What will I say? ”  “Who do I talk to?” “ What will I do if there’s an awkward silence? ”  While social awkwardness is common, it’s not a lifetime thing. You can learn how to build self-confidence that doesn’t feel forced or unnatural. You can still be yourself and have the self-confidence to try new things, meet new people, and all the benefits that come with a confident aura.
Read more

Best of 2020: Great Landing Pages for Design Inspiration (Showcase Examples)

Image
A great landing page design is crucial when it comes to announcing new products or services as well as the launch of your company. Great landing pages help visitors focus on a singular action. That makes them great for driving conversions and signups. Zimed is one of our best landing page design examples on Envato Elements. Nowadays, you don’t have to be a web design expert to create a landing page. There's no shortage of  quality landing page samples on various marketplaces so all you need to do is find the one you like, buy it, and set it up. That's why we've set up this landing page showcase. In today's post, we'll share our best landing page examples from Envato Elements and ThemeForest. Find Great Landing Page Design Examples on Envato Elements for 2020 Envato Elements is a great starting point when it comes to the best  landing page design . Envato Elements is a subscription-based marketplace with dozens of landing page templates. When you start bro
Read more

18+ Best Free PowerPoint Puzzle Pieces Templates (Infographic PPT Slides)

Image
Many people are visual learners. The population of visual learners is why it helps to use visual infographics to explain an idea in your PowerPoint presentation.  One of the best examples is using a PowerPoint puzzle pieces template.  Each piece of the puzzle can fit together into a singular idea. Templates like the premium  PANDAWA  template have all the PowerPoint puzzle pieces you need to explain a complex idea. Using a PowerPoint puzzle pieces will help you explain concepts more clearly. You can quickly and easily change professionally designed PowerPoint puzzles to fit your needs. This round-up will show you some of the best free PowerPoint puzzle templates. You'll also see top PowerPoint puzzle pieces templates from Envato Elements, and more puzzle pieces templates from GraphicRiver. Download the Best PowerPoint Puzzle Templates From Envato Elements Later in this tutorial, you'll see free template options. But for now, let's focus on the best of the best: pr
Read more