Game Database Project in Angular
We are going to build a cool game database project in Angular. In this project we are going to get the data from an API, which contains details of more then 50,000 game and use various features of Angular to show them.
This project is inspired by this YouTube video from Freecodcamp YouTube channel.
We will first create a new Angular project by the below command. We are using angular routing and CSS in this project.
We also don’t want to use strict TypeScript features in our project. So, we will make the strictTemplates false in the tsconfig.json file.
We will also add Angular material in our project. Here we are choosing the purple theme.
We are also installing another package of angular-gauge in our project.
Now, we need to add these modules in our app.module.ts file.
We will also update the styles.css to contain our generic styles.
Now, we will create our first component with ng g c command called search-bar. We are giving this command in the integrated terminal.
Next, remove everything from app.component.html file and add our search bar component.
Now, we will add the code for search bar in the search-bar.component.html file. Here, inside a form we have an input box to submit the game name.
Next in the search-bar.component.ts file we will navigate to the search and will be provided with the value.
Now, we will put the style for the same in search-bar.component.css file. Here, we are putting the style for the container, form and input.
We will also put the style for the button and the logo in our search-bar.component.css file.
We need to update the app-routing.module.ts file to show a HomeComponent initially and also when we search.
We also need to add router-outlet in our project for routing to work. Add the same in app.component.html file.
In the home.component.html file, we will show the for field with the help of mat fields from Angular material.
In the home.component.ts file, we need to add a sort string.
We will also add the styles for the home component in home.component.css file.
Now, our header and filter are looking perfect in localhost.
Next, we will create services in our project from the command line.
We need to put the BASE_URL of our API endpoint in environment.prod.ts file.
We also need to put the BASE_URL of our API endpoint in environment.ts file.
We need to have Models for our API data. So, we will create a models.ts file in the app folder. Here we are exporting the Game and APIResponse model.
We are also taking the help of some other models here in the Game nodel.
Now, in the http.service.ts file we will use the HttpClient from Angular to do the API call. Here, in the getGameList we are hitting the games endpoint and getting the data.
We will be using Rapid API to get data from RAWG Video Games Database. Search for the same in rapidapi and you will get your rapid api key and host.
Next, click on About and you will get the rawg link.
We need to get an API key from RAWG also.
We will create interceptor through which will help with error and header part of the API call. Create an interceptor folder in the app directory and a file http-errors.interceptor.ts inside it.
Here, it will throw the errors which we will get in the API call.
Next, create a file http-headers.interceptor.ts inside interceptor folder, and add the below content in it.
Here, we are provide the rapid api key and also the RAWG api key.
We also need to add these in the app.module.ts file.
Finally, we will do the API call in our home.component.ts file. Here, we are using the HttpService to hit the endpoint with metacrit keyword. We are also changing it if user did the search.
The result is stored in the games variable from the API call.
Now, when we open the console in localhost, we will be able to see the results from the API call.
Now, in the home.component.html file we will add a new section. Here, we will use the data which we got from the API.
Now, we will add the styles for the same in home.component.css file.
Next, we will add some more styles for the same in home.component.css file.
Now, our homepage will show all these nice games from the API.
We also need to add the calling to the searchGames function in the Search bar of our home.component.html file.
Now, both of the search and sort are working on the localhost.
Next, in the home.component.ts file we will write a function openGameDetails which will take us to the details component and also provide the id.
Now, we will create the details component with the ng g c command and also add the route for the same in app-routing.module.ts file.
We also need to add a new function of getGameDetails in http.service.ts file. It will hit two API endpoints to get the game info and trailers request.
Now, we will write the html for details component in details.component.html file. Here, we are showing all the data from the API.
We will call the getDetails on the ngOnInit() in details.component.ts file. And store the response in the game and gameRating variable.
We are also using the support function of getColor, which we are using to show different colors based on value of ratings.
Next, we will add styles for the same in details.component.css file.
Next, we will some more styles for the same in details.component.css file.
Now, our data is showing good in the details page.
We will call a new game-tabs component from details.component.html file. And we have also created the same from the terminal.
We will add a variable game in the game-tabs.component.ts file.
We will add the html in the game-tabs.component.html file. It will show the screenshots and if available the trailers.
We will also add the styles for the same in game-tabs.component.css file.
Now, we are getting the perfect screenshots in details page.
We will also get the trailers, if they are available.
This completes our project and you can find the code for the same here.
