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.
-
AngularCreating Your First Angular App: Basics
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
jQueryChart.jsSweetAlert
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.
Powered by WPeMatico