Angular 11 Tutorial - Code a Project from Scratch

this is the perfect course if you want to improve your skills with angular you will learn to create a project from scratch using a public api slobodan who created this course is very experienced and he's worked at many top companies in this tutorial i'm building an angular application from scratch and i'm using public api to create this interesting game database website i will show you how to set up a project using angular cli how to create components how to make http calls how to implement http interceptors how to make services also you will learn how to set up routes for your application how to pass data with routes in between the components we will use pipes for data formatting various angular directives like ng4 and ngif and so much more so stay until end of it and you'll be in a good place to have a great foundation for building angular applications for project setup i'm gonna be using for this angular cli so for generating all the components it's going to be angle cli and npm packages for others so first i'm gonna name our project ng video game db stands for database and i'm going to set the style to be scss because i like using more css for our stylings i'll skip strict checking for this project right now but i would like to add the angular routing now the project creation has been done successfully we want to head over into our root folder of our application which is ng video game db and the first package which i want to add is angular material i will add all the packages at the beginning and import them into our application so that later on we can focus on just coding type ng add angular material for material pre-built theme you can use whatever you want i'm going to use the second one in this list and i want angle material to set up the typography styles and to set up the animations for our angular material and the last package which i want to add to our project is angular gadge this plugin i will be using for displaying the rating of our games so just type in npm i angular gadge and now when we successfully install all these packages we want to import them inside of the app.module.ts first i want to import the angular modules forms module and http client module next are the modules from the external packages like gadge module then we will import the angular material modules we will need mat tabs module mat icon module mat form field module and matte select module and now all of these imports we want to include inside of our ng module in imports array and for gauge module we want to call for root method the next thing i want to remove some of the global styles which are pretty default setup in angular application and i will set up some my own rules so for the body i will use the roboto fun family i will set this dark background i will add some height and batting top also i will set the same font family for all the child elements of body and reset the merging padding and box sizing and the last thing is that we want to actually run our application inside of terminal cd to our folder directory into a root of our application and run ng server and when this eventually starts our application successfully we can head over to localhost 4200 to see our application voila setup has been done now let's start coding first component which i want to create is going to be search bar component this component is gonna stay on top of our application for searching the games so i want to head over into our app directory and make new one called components all the components are going to be stored here for generating all components i'm going to be using angular cli so run the command ng generate component search bar these are shorthand nggc now once that has been generated i want to place that search bar component into our main app component so let's take the selector of this component and let's put it inside of our app component first let me remove all this boilerplate code from the app components html file we don't need that anymore and i'll put search bar app search bar selector there that is our component now inside of the app component.ts we don't need this title anymore so i will remove that and now let's see how our component looks like in the browser and we can barely see it because of our dark background but that's going to be fixed in no time i'll remove this boilerplate code from the search bar component and this component is going to be very simple i'm going to create on top of our component search container class div and inside of that we'll have a form with a class of search form the next is the logo actually and clicking on this logo will redirect to the home page so router link is going to be a slash the next element is our input element this one is going to be used for actual searching and it's going to have a class of search input and the name of search this one is going to be used in our template and the last element is our submit button which is going to be a class search button with the text of search once we click this button it's actually going to submit our form and we can take it from there and this is how it looks without any css so it's horrible let's apply some css styles to it first i'm going to create search selector which is going to be the main selector of our component and inside of it it's going to be search container first with it's going to be full 100 with a height of 60 background it's going to have this color and also we want to position this fixed so it's always on top of our screen with position of top and left zero and z index one to be four we want to align the items to the center of that and this starts to look a little bit better now for our form we want to set the width to be a hundred percent and to set the max width uh 1200 pixels because we want to set the max width for our large screens and to center it with margin zero auto for our input margin is going to be 10 pixels on the left side we're going to give some small padding to 10 pixels width it's going to be 300 pixels and we're going to give a border radius to the left side on the right side it's going to be the button and we want to reset the outline in border to be none for our button i'm gonna reset border and outline to be none background is set to blue padding to 10 pixels also border left it's going to give some small edge on the right side we're going to set the radius to 5 pixels color is going to be white font weight bold you're also going to give some transition for the hover effect and curse to be pointer it looks better but it doesn't have any hover effect so let's add that color is going to be blue and hover background is going to be white and the border is going also to be blue as well as the color so it has some separation on the left side nice the last element of our search bar which needs styling is our logo so i will apply some margin to the left side color to reset to be white font weight to be bold so it's nice and separated cursor to be pointer is it's going to be a link and text the creation to be none that's sweet now we want to handle submitting of our form and we are going to catch ng submit event and we are going to create onsubmit method which we will going to be passing our form as an argument inside of our search bar component we want to inject angular router as a dependency and we will use this router to redirect our application to our search page which we will be building later on and to pass in the value of our input field from our form inside of our unsubmit method we're receiving form as an argument which is a type of ng form and we're using this router to navigate to a search page which we'll be building later like i said before from the form which we are getting will extract in the value and the search which is actually from our input which is called the search as a name also we want to import the missing module which is ng form and router from angular router now let's test if this works let's just type in some random text and sub it now form to see do we get any redirection as if we check the console we can see that it's getting the error so as we haven't set up this routing yet but it's redirecting to search and once our search bar has been completed i want to create our first component from our two components which we are going to have in our application which is home component so we want to create new directory inside of component directory which we will call home directory and then using angular cli i'm going to type in ng generate component home which will generate our new component then i want to create routes for this component so inside of the app routing.module i will create path which will be default path and the component will be home component and also we want to all of our searches to land on this page as well so we'll add path search slash game search which will be our parameter sent with our route so the component for both of these route is going to be home component and then the last thing is i want to create router outlet inside of our app component so basically all our components or actually the both of our pages is going to be loaded in this router outlet and on top we will have this search bar and now if we check our application into browser we can see that home component has been loaded although we can barely see it as the text is dark the first thing we want to implement in our home application is actually our filters component which will be used for filtering the games which which are going to be displayed on home page as we first initially when we reload our application it's going to have a lot of game cards in it so we will create create a div with a class of filters and we will use mat form field for our fields this is from angular material we'll use matte label and we will put a label of sort for uh our selection we'll use mat select uh component from angular material for class we will set to be sort select so that we can style it will attach ng model sort so this is going to be a variable from component which will be attached to matte select and we want to add some values so we will have value name released added created updated rating and metacritic now to attach this math select we want to create this sort variable we just created inside of our html file so we want to add that to our home component ts file and once we created that we can preview what we have created in our home component as you can see we have all the options we just added but it's barely visible so we need to add some styling so let's head over to our home component scss file first let's select the filters class which is a wrapper around our mat select component so we will set the max width to match the containers with some margin and also padding left so it's aligned on the top navigation and the games which we will be creating later on so the next thing is we want to use ngdp selector this selector is used when you want to select some of the components which are generated from for example matte matte select in this case so for my matte form field in fix we will set the background color to be this blue color so it's so it's actually visible because right now it's transparent for for the following properties matte select value arrow for the placeholders and for the form film label we want to set the color to be white and opacity to one for matte form field infix we will set the border color to be white board top to be removed and padding left to be 5 pixels format form field label we want to set it to to have padding left five pixels so it's so it has some padding on the text and for the uh matte form field underline so this is basically an underline uh underneath the selection we want to set the background color to be white and now let's preview what we got okay the next thing which we want to build is our actual game boxes so first i want to create a wrapper for our games it's going to have class of games then in this game's deal we will have all the games generated and loop through angular and g4 but we will build that later so first create a class game and inside of that class you want to have an image so it will have a div of class game thumb container inside of that container i will put an image this image is going to have a source i just put some randomly picked image from the web and it's going to have a class of game thumbnail so we can style it later then i want to have a description below the image and i will add a div with a class of game description and paragraph with a class of game name so this will be the name of our game actually and then on the bottom i want to display all the platforms which are supporting this game so they will have a class of game platforms and an image is going to have a class of a game platform also for the url i will put now just some randomly picked image from the web which but we will later on fill in all the real data and that is going to be a slug so let's preview what we have now as you can see the image is really large and you can and you can barely see anything here so let's apply some styles to this let me head over to homecomponent.scss file and first let's create games selector which is for our wrapper so i'm going to put display flex and flex wrap to be wrap so we want to wrap our our boxes actually into uh three or four we will decide later on in a row justify content to be center max width to be 1200 pixels and to put margin 20 pixel auto and those were stylings for our game wrapper that hasn't been affecting a lot our game box itself so let me set the so it's like the selector of game for our game box the width of our games are going to be 280 pixels margin is going to be that 10 pixels so we'll have some margin around our boxes height is going to be 330 pixels everything will which overflows it's going to be hidden we'll have slight border radius of 5 pixels background color is going to be dark we'll have some slight yellow box shadow so and later on we will apply the hover effect so once you hover over this box it will expand so and we will add some duration of transition so it has nice animation and the cursor pointer because eventually when you click on these boxes it will redirect to details page now let me apply this hover effect when we actually apply uh when we actually hover over these boxes so box shadow is going to expand and it's going to be it's going to move so transform translate y is going to be 3 pixels so it's going to jump a little bit up the next thing is we want to style our thumb container which is of our thumbnail or image background color is going to be black so this is for when we are missing the actual image the background color is going to be black position is going to be relative height 172 pixels color is going to be white and text is going to be align center so we will display there is no image once when when we actually don't have an image for our game and for the thumbnail itself we want to position it absolutely and to give top left and right zero position and we want to set margin zero auto so it's centered also for the height we want to have 172 pixels for description box we want slight padding so 20 pixels it's going to have display flex and flex direction is going to be column we want to justify content to flex end and height of 157 pixels for our name or title of our game we want color to be white and bold font size to be 22 pixels not nice and large for margin bottom we want to have 20 pixels white space is going to be no wrap so that you know you're not wrapping and we're applying ellipses of text which overflows so we have that three dots if the text is too long and it doesn't break the layout for our platforms on the bottom we want to have a display of flex so they are all aligned and for our platforms you want to have width of 20 pixels and to have slight margin on the right side so at this point we are done at coding html and csf on our code page so now we want to create our service which is which will actually fetch the url and the real data which will be fitting in to our home component so first thing which i want to do is i will create a services folder and inside of that services folder i will create http service file using the angular cli so i will type ng generate service and name for this service is going to be http and the angular cli is responsible for injecting our service into our application itself so we don't have to do that manually the thing which we want to do inside of our constructor in http service we want to inject the http client which will be dependency to communicate with our backend so the first method which i want to create is get game list so this is the method which i'm going to be calling from our home component and fetching the list of the games this method is going to receive two arguments ordering and search search is not going to be required both of these are going to be string and we are going to be re returning observable api response game this interfaces i'm going to be creating later on so first i'm going to create the parameters for our method and the default one is going to be ordering so in order which we want to sort the game list and if a user is providing a search if he's typing in anything into our search box we want to add append also the search parameter as well and the last thing we want to return the http get method which will be returning api response this interface and the game interface we'll be creating later the base url of our service is going to be created inside of the environment file and the route for this call is going to be games and we are setting the parameters of params now let's create that base url constant which we want to put inside of the environments folder inside of the environments file both in those inside of the prod and whatever the environment you have inside of your application and then we want to import that environment as an and it's a shorthand and to use that as our as sr url and now i want to import missing modules so observable from rxjs and http params and now let's create interfaces for our types api response and game so i will create new file which will be called models.ts and inside of that file i want to export interface game this is the main interface which we'll be using to define our data so this interface is going to have types of background image name released metacritic url website description metacritic genres this one is going to receive an array of genre we will create this interface later parent platforms also array of parent platform we will create this one as well later publishers array of publishers ratings again array of ratings screenshots it's going to receive the array of screenshots trailers it's going to receive array of trailer so this all these array interfaces i'm going to create later on the bottom the next one i want to create an export interface api response and t is a dynamic type so whatever type we pass into our api response it will return that as an array results of array of data type and now let's create the interface of jar if we just have a name now let's create interface of parent platform it will have a platform and a name property interface publishers is going to have a name property of type string interface of rating will have id account and title interface interface of screenshots will have image of type string and the last one is interface trailer this one is going to have data and max which is going to be a property of type string and now we created all the models we need for our application and which we are going to be using in this in this application now let's import them into our service so for api response and game now in order to consume our api it's not enough just to set the url which we need so it requires some of the parameters and some of the headers to be attached to our requests so uh in order to do that i'm not going to set up the parameters and the headers to every single request i'm going to do that on the application level so to do that i will use the interceptors so angular provides a way to do that on the application level like i said before the first thing which i want to do i will create a separate folder for these interceptors the folder name is called obviously interceptors and i'm going to create three interceptors for our use cases http errors.interceptors.ts file this one will be handling the errors obviously the http headers.interceptor.ts file this one will be attaching the headers which we want and the http dash params dot interceptor.ts file and this one is attaching the parameters to our requests so now inside of our http errors file i want to create an injectable service and i'm going to export the class of http errors interceptor this class is going to implement our http interceptor and we're going to have a constructor empty constructor for now and on all of these interceptor we need to implement intercept method from our http interceptor interface so this intercept method requires two arguments first one is htv request and the second one is http handler and it's going to be a returning observable of http event this is going to be type of any so we want to return of next which is a handler for our request with a method of handle and we're going to call a pipe which is going to catch an error so you want to do whatever you want in your application but in my application i'm going to log the error and i'm going to be returning the observable throw error so you can handle however it suits for your needs and now i will just import all the missing modules from our file and the quick import feature from the vs code is really useful for for this your purpose and the next interceptor which i want to implement is http headers interceptor all these interceptors are pretty much going to have like 90 the same uh code we are implementing http interceptor uh interface and this class is going to have a name http headers interceptor so we also have intercept method same as on the previous one but the body of the method is a little bit different so i want to clone the request and the set the headers in the headers i will set the two two headers first one is rapid api key and the second one is host and the key host uh instructions you will get on the public api documentation where you will register for free and get all the tokens which you need and i will put all the links of this public api into description of this video so that you can go and register and follow along with me as well and also we can set actually on this interceptor the params as well so that we don't need actually this http params interceptor anymore so we so i will remove actually that file and i will put the params inside of a key property in set headers and at the end i will just return next handle request which is the request we just created so it basically attached all these headers to the previous request which we cloned and it just emits the attached uh request with these headers and once again just import missing modules from you can use visual studio code quick import if you're using visual studio code but pretty much all the uh editors do have their import uh features and now when we are done creating our interceptors uh we're actually not done we need to insert them import them into our application so we need to go to app.module.ts file and inside of the providers array we are going to provide these interceptors so i'm going to create an object with the property of provide http interceptors use class http headers interceptor this is the interceptor we actually created and i'm going to set the property multi to true and i'm gonna provide exactly the same object for our http errors interceptor and i'm gonna import these interceptors using quick import feature of the visual studio code now as we finally created our http service and our interceptors we want to start utilizing our service and the data actual data which we want to get and the feeding into our page so let's head over to home component the component which will be loading first initially and i want to create a public property of games which will be a type of array of games this is the interface we created a couple steps before in the constructor i want to inject http service this is the service we created just a couple seconds ago and i want to inject activated route this is the angular service it is angular service we want in inside of the ngo init lifecycle hook this is the hook which runs the first when your component builds and we want to use the activated route params to subscribe to this event this event returns the params which is a type of params and basically we want to check in uh we will implement later when somebody searches our games to this query of search text to be attached to the url of our page so when we actually load the page we want to check first here is there any game search queries into our url if there is we want to call a search games method this is the method which we are going to create like in in next couple of minutes so for this method we we're going to send two parameters and the first parameter is going to be the sorting and this public api lets you choose couple of different options like date when it's updated when it's created and metagrid this is by the rating the rating methods and the second argument is game search this is the actual filtering so if there is a search query into our url we will call this method with these parameters if there is no search queries into into our url we want to just call the search games with only sorting parameter and now let's create the search and games method which will actually call the api and fetch these games this data so search games method we will have will have two uh two arguments like we said before first one is going to be sort and the second one is going to be search second one isn't necessary isn't required so the both of these is going to be string type and the return type of this method obviously is going to be void so it's not returning anything so we are going to call the http service and the get game list method this method is the only method we created into our http service and this method accepts two parameters first one is sort and the second one is search like we said we want to subscribe to this event and we are expecting back to get the game list which is going to be api response the interface we created before and the type is going to be the game and when we get that result we want to fit in this game list property results into our games and i'm just going to log this result so that we actually can see in our log what we actually got let's import all the missing modules the same way as we did it before and now finally if we go to our application into browser and if we open up the console we can see the log object and if you check our results array we can see the actual games which we finally got so the next step is to use these precious data and to fit that into our html and to make our page finally dynamic so that we get the games in our home page instead of this static content so let's do that and now inside of our html file of home component you actually can access the games variable which is now filled in with all the games which we retrieve from from our api so i'm going to create inside of the games div with a class of games i'm going to create ngcontainer and this container is going to be using ng4 to loop through all the games and display this play them basically i will assign the variable of game for each of these games so first i want to check uh if there is a game background image property so if there isn't we want to display a paragraph so i'm gonna assign ng if if it doesn't have a background image and i will just display text of no image but if there is a background image inside of our game i will use that as a source the next thing which i want to implement i i want to if there is a game name obviously every game should have a name so i will use game.name to to access the property of name from our game and then on the bottom we have a game platform so some of the games have multiple platforms like playstation android xbox a pc you name it so we are returning this information as an arrays so we want that once again when you use when you're using arrays you want to loop through these arrays and just display them as a separate item so we are using once again ng4 to loop through game parent platforms and i'm going to create a variable name game platform to access these items so i have downloaded uh from the web different icons for the platforms you can use whatever i mean style you want but and i have created a folder inside of the assets images platforms and put all of these uh platforms over there with the extension of svg so this is the reason why i'm using this url and i'm accessing the property of game platform dot platform dot slug to access this um this url this is on my local machine on my on my application and for the alt of the image i will just use platform.slog and now we can go and preview what we actually what we got now so if you open the browser we can see that finally we have multiple games so we have four games in a row and you can see this we have this nice images of the background we have the names the title names of the games and also the various platforms uh this looks interesting right yeah so the next thing which we want to do here so as you can see this sword doesn't work at the moment so this is the thing which we want to do we actually want when you choose some of the stored items we want to sort our games based on these sorting items so i mean a lot of things could be done here we could obviously improve like the loading we can add pagination we can add infinite scroll a lot of things can be done but this is like the basic thing how how would you add some of the data into your page how to make page dynamic and yeah and now let's make this sort uh select menu actually working yep so what we want to do is in our mat select we want to catch an event whenever our selection changes so match like has a default event for this and we want to call certain action upon it so obviously i want to catch that event and the name is selection change so when selection changes i want to call a function which is uh called search games this is the function we already defined inside of home component and this game this function we are calling on ngon init already passing some default uh values for sorting but now on every selection change we want to pass in the sort variable which is connected to our selection menu and it's defined inside of the home component it's a public sort type of string so every time the selection changes we will pass in the new value which is updated and our uh our games list is going to get updated as this is already connected and hooked up so we should see the changes right away so let's test this out and if we open our application now let's see what we have there so if we click on a sort and let's say just whatever let's say released and you can see that games has been already updated i mean instantly so let's choose something else added boom yeah so it gets updated right away and if we check the if we inspect our page and go to network tab and if you try to let just another one we can see that the request is sending with the parameters of ordering and the the thing which we actually selected so in this case it's created so yeah looks uh looks perfect and the final thing which i want to do on a home page so if you remember that i said uh that we want to click on one of these games and one once we click it means that we want to see more about the game and we want to see more details so what i want to do is i want to bind new event uh on our div game with the class of game so i will buy the click event and i will call a method which will be named open game details and this event we will just create in a second to this event we will pass in a game id so that we can open that game fetch the api and retrieve the more information about this game so now uh let we head over to home component yes file and that we created open game details so first thing which we want to do we want to uh reroute our application to that new page details page so we will need a router for that and i will inject inside of the constructor private router which is a type of router so i will use auto import from the visual studio code and now let's create the game let's create this opengamedetails method it's really simple method this method will receive an argument of type of string it will be ide will return return void so we are not returning anything so we will call this router which which we just injected and we will navigate to details page and send in id as a parameter so the url will be our localhost then slash details and then id of our game and that's pretty much it now it will give us error because we haven't created that game yet so we will do that in the next step but before we finish everything i want i want just to do a little bit of refactoring on our on our uh home component ds file so uh we have two uh subscribers which are left hanging so we don't we don't want that because we can avoid some uh memory leaks so i want to create two subscriptions to watch out to our subscribers so on top of our class uh create route sub subscription and game sub subscription and inside of ng united lifecycle i will sign routes up to this activated route param subscription and inside of our search game i will assign this game sub to this http service get games list to this subscriber so we are catching the subscribers in these two variables and we want to implement new uh on destroy lifecycle hook so i will implement that inside of our class insert there and now we want to create uh to implement engine destroy method which actually implements on destroy interface so we want to check if this game sub exists so if there is a subscription existing we want to unsubscribe this is when our page is closing so that there is no any memory leaks and we want to check exactly the same for route sub we are checking if there is any routes up uh subscription you want to unsubscribe and now i will just add on destroy uh interface into our class and import the missing modules for the subscription and the router and we're good to go to go and implement our details page let's start doing that first let me create a details page and inside of components folder i will use angular angular cli to generate new component so just type in command ng generate component details and once that is generated it's connected to our application inserted automatically and i want to go into app routing.modules file and there i will create a new route for our details component so that new path will be detailed slash uh column id so this is the id which we are going to get in the url which which we are sending from our home page and we are catching that idea of the game which we're which we'll be using for uh showing the details of our games so the path is detailed id which is going to be a number and then component is going to be details component and then we just need to import that component and now let me test this new route which we just created so open the browser again in our application and if we click on any of the games we should get the details new route and the id of this this game and you can see that detail works this is the html code of our new component so the route works perfectly we just need to start uh coding and put the details of our game in html code so let's start doing that on the very top i will create a deal with the class of details so we'll so this will be the main class of our page and then on the top we want to have a banner big banner with the image of our game so i will create another div with the class name a game banner so inside of this banner we'll have this image and the class of the image is game better image i will put some random image for now but later on we will make this dynamic and for dalt i'll put background image and this is for accessibility purpose and below that below the game banner we want to create new div with a class name of game content inside of this div we're going to display more information more details about this game that is the reason why user wants to actually navigate to this page so uh i will click i will create uh another with a class named details wrapper and inside of that tip i will create another one with the class uh game header so this is this is going to be a header of our content and below we will have uh tabs actually because it's going to be more um nicely laid out if we have the tabs on our page so inside of uh game header we want to have a title uh and i will create a h1 tag with a class name game header title and i will just put game name here for now uh below that we want to have a issue tag and the class will be game header release date so we'll have our release date here and below that we want to have a john of our game so class well i will create a paragraph of class game header genres and inside of that uh span but i will just put rpg for now this is also of course going to be a dynamic and then on on the right side we want to display uh graphical dis the representation of our rating of our game so i'm using the plug-in mvl gauge so i will create a div with the class name game gauge and inside of that i will put our extension so we will have a couple of properties here so i will put i mean i don't have to explain all of these properties but you can see we're setting the class the max of course this is the max rating uh start and end angle of our gauge then the value we're gonna put the game rating so this value is going to be a variable which we are going to define right away on our class details component so uh it's going to be zero it's going to start at zero and then when you fetch the data it's going to animate to the value which we which we retrieved from the api animated obviously we want that to be true then color uh we are gonna create a function gut color so color will be changing depending on the value which we're getting so inside of details component the ts file i'll create a new method named get color and this method is going to receive a value which is the type of a number so this is uh the value we're passing in from our widget and the return type is going to be a stirring so we are returning back the color which we just is going to be using to display the color on their bar so if the value is above the 75 so it means the rating is good and we want to return this color which represent the green color then else if the color is the value is lower than 75 but it's greater than 50 so we want in that case to return this is the orange color and if the value is less than 50 but greater than 30 we want to display this yellowish color and for everything else below the 30 we want to display the red color which means that game is bad so the rating is terrible and that's with our get color function and then we want to set the animation duration i will set two seconds so it's nice slow and uh it can catch the user's attention yeah and on the bottom uh of this uh of this uh widget we want to place uh anchor tag uh with the class name game gadget label and the target is going to be underscore blank so we want basically to put a link here to our rating where the rating has took to place on metacritic website and that is for our header of our content uh below that you will have uh tabs material tabs and we will store that in a separate component which we'll be generating uh just in a second but first let's first style what we got here and let me first preview what is our html how it looks like and then we can style all of that and continue with our tabs so we have this big image which will be our background image but it needs to be sized better and our title game title i mean it's very simple we have release date we have darjean this is our plugin for rating so it's zero at the moment and yeah and this is metacritic link so uh this is how it looks like now let's style so inside of our details component uh i will create a details wrapper selector and uh this is a wrapper which i have created the same on our home page so max width is going to be 900 pixels and the margin 20 pixels auto so this is to center our content and to give slide separation on top and bottom so position is going to be relative as we are going to have a image floating and to be positioned absolutely so inside of our details div i want to start first our widget for the rating i'm i'm going to use ngdp selector angular selector for the elements inside of uh as a child components so this is the basic elements which are be generated compiled at the runtime the width and the height is going to be 150 pixels and this space is going to be block and slide padding to 10 pixels for the dial and this is a width of our stroke so it's going to be 10 and for the value i want to set dash right to be none and the stroke width to be 13. and then for our value text this is the text which at the moment shows zero so the color will be white weight is going to be bold and one side 24 pixels for our game garage dev position is going to be absolute we are going to position it top 50 pixels and on the right side zero and for our label which says metacritic font size is going to be 20 pixels color white position relative and at from the bottom 60 pixels now we want to style the game div and for the banner uh the height is going to be 442 pixels and overflow hidden for the image we want to be the full with and to blur a little bit so that the text is separated from the background for the content we want to center it and position relatively and to move a little bit on uh i mean 200 pixels on top because we want the text to be on the background on the banner so for the header title i'm going to set this huge font size and to set the color to be white also to be bold and to set the line height to be the same as the font size and i don't want it to wrap so white space no wrap for the release date also the color uh white and the font weight bold and for john is the same and that's what we're going to do for our top part and now we want to grab our data and to make this page dynamic so inside of our details component es file i want to create a couple of variables first so game id this is the id which which we are going to be retrieving from the route type is string uh the variable game this is the variable which is going to hold all the data of our game so the type is going to be a game this is the custom type which we created inside of our models file and then two subscriptions for because we are going to have two subscribers on our page so route sub subscription and game sub subscription now we want to inject a couple of dependencies inside of our constructor so the first one is activated route uh it's going to be private of course and the type is activated route so this dependency basically uh provides you with the api of the route once it's activated and the private http service this is the service uh custom service which should be created to communicate with our api so now we want to create uh inside of ngo and in it basically we want to we can assign our subscription to our route sub and we can call this activated route params subscribe so we are subscribing to our params and we are getting back the params which is a type of params so we want to assign to our game id what is sent to our parameters through our details slash id url so we are assigning this game id equals params id and then we will use this id to pass into our uh our method which we are which we are cr we are going to create in a couple of seconds this game details and we are passing uh this game id so let's define this method get game detail so it's going to receive id which is type of string and we're not going to return here anything it's type of void so here we're going to have another subscription so we are assigning this game sub to our subscription so that we can later on clear all these subscriptions once the details page is closed so we are going to call the http service and this method doesn't exist yet but we are going to create that one in a second get game details and we are going to pass in this parameter id which we're getting from the route uh we're gonna subscribe to that and from the response we should get a game the actual game which we want yay and we will just pass in to our game a game response and actually we want to update our game rating uh if you remember that we have that widget for displaying animated rating of our game so i want to set us time outside that the user has some time to load the page and to sit a little bit delayed so i will set a timeout and i will assign this game rating to this game metacritic so this rating after one second yeah and now i will just import all the missing modules uh from our file using quick import feature of the visual studio code and now we want to define this game details method inside of our service because we don't have that created yet so let us head over to http service ds file and inside of this file let me create this method so the name is game details get game details the parameter which is reserving is the retrieving is the id of our game so id is type of string and we're returning observable of type game so we will have uh three requests here because actually we are combining uh all all the information from these three requests into single one so we will define three constant game in for request and the url of this get request is our base url slash game slash id so this here we will get the majority of information then we want to trailer so we will display video trailers on our page so this request is for that so constant game trailers request equals http get method and the url is space url games slash id slash movies and the next one is we want to display some screenshots of our game so the next one is this http get base url slash game slash id screenshots and now we want to use a fork join to retrieve all of these uh get methods and combine them into one so i'm passing gaming info game screenshots again trail game trailers request and i'm using pipe to map this response um so i'm returning one object and um i'm gonna use uh the old information uh i'm gonna use spread operator to use all the properties from our gaming for request and i'm going to create two additional properties screenshots and trailers to fade in the results of the additional two requests which we are getting so we'll get everything but we need inside of this get request and the last thing of course is to import all the missing modules again and now we can head over to details component html file and inside of the source of the image we will change this to be game background image so we're going to implement now our data for our title we're going to set the game dot name property for a name then for the release date i'm going to use game.released and here i'm using datepipe to to format our output format of our date so this is a pipe which formats uh the html for our needs or strings now for genres as we can have more of these i will use ng4 to loop through the array which we're retrieving and i will set the last uh index so we will need last index in order to uh display the commas so for for name i will use genre names name and then i will use ng if to see if the last only for the last you you don't want to display comma obviously so for all the others we want to display comma then i want to the last thing is for our label we want to set the url of the review where it has been order rating so i will set the game metacritic url and now as you can see this rating bar is animating nicely and we have attached the metacritic urls here so if you click on it it actually gets us to their site and you can see the breakdown of this rating and get more information about how they got to this rating uh the name obviously game name has been cooked up in the release date so we're using datepipe here to you know format this but you can use whatever format you want as long as you're you're using a datepipe and at the bottom we have the genres so as you can see the comma is not in the last place so the next thing which we want to do is we want to build the bottom part of this page and provide more information so i will be using uh single material tabs for this element so let's call that but before we actually hold this we want to do a little bit of pre-factoring on our details component page so i want to clean up all the subscriptions once the component is destroyed again the same thing which we did on the home component so i'm gonna implement on and destroy and destroy uh lifecycle hook and uh i will create ng on destroy method to implement that the return type is void obviously and i'm just going to check if there is a game sub and if there is i'm going to unsubscribe and the same thing for the route sub and then i'm just going to import on destroy uh interface and that's done now let's let me create using angular cli or tabs component and inside of the terminal i want to open our directory source app component and i will type in ng generate component game tabs and once that is generated i just want to head over to our details component html page and on the very bottom i want to include this app game type tabs so let me preview is that hookup correctly and as you can see it is so now we want to head over to our newly created app game tabs uh component and want to start coding uh all the details we want to display on this we're gonna have three tabs so you will see in a bit so on very top of our game tabs dot component.html file i'm creating uh div with the class name game tabs so this is our main wrapper then i'm creating mat tab group this is the group of our tabs using angular material metal line tabs is going to be start and the background color is primary so the color is going to be the color you choose for a theme when you install them in your material uh first tab which i'm going to create is a mat tab labeled about so we're going to have about screenshots in trailer section so in in our about section uh on very top i will create a paragraph game tab spare and the label is going to be platforms and here we're going to list all the platforms of our game so for now i'm going to put the pc underneath uh i'm going to create another paragraph game tabs pair with the label of publishers and here we're going to display obviously publishers so i will put konami underneath i want to create another paragraph game types power so all the classes are going to be the same for these paragraphs the label for this one is going to be a website so we want to link a website to a game if there is any inside of a paragraph i will put a link anchor link with the class name games apps link href is going to be a pound now and target underscore blank so we open that in a new browser in a new tab and uh i'm going to leave that without a link for now then we want to put some a description of the game so i will put another div with a class a game description and put some random text and below that i will create new paragraph with a claim a video class game to have votes so we want to have a voice of our game every game has a votes in a rating so i will create two icons uh with the game with thumbs up and thumbs down so i will use uh two spans so span and then i will use matte icon which we included with the angle material class name for this one will be games game votes up and uh icon text is thumb up and uh we want to display the count of the thumbs up so span uh will be class name game votes count and here i'll just put some random numbers so same thing we want for the games thumb down uh but the class name will be game votes down and obviously the icon will be thumb down so this is a font icon and you just put in the text and you get the icon so this is the icon for the thumb down and i think that's all what we want to hear for about label about tab so let me preview what we got okay uh that looks ugly for now but we will start in a bit so for the second tab uh it's going to be a screenshot this one is going to be very very simple so we're just going to have an image and the image is going to have a class name of game screenshot so we'll have multiple screenshots but for now it's going to be just this one for source i will put a link from the web and i'll i'm just going to put a screenshot and the last tab is uh trailers tab and as you can see uh here we're going to display some game trailers and so i will create a video html tag with a clay stamp class name of game trailer and i'll put controls as well so the user can navigate uh source is gonna be just random video right now but we're gonna implement that later on type is going to be video mp4 and we're just going to display text your browser doesn't support video tag if you're using some older browsers and finally let me preview what we created so as you can see we have tabs and we just need to style it a little bit better and apply some styles to screenshots and trailers as well so let's do that inside of the game tabs components a css file so i'll create a main game selector on top and all the styles are going to be inside of this selector so uh dash tabs for the game tabs selector we want to set the background then we want to set the color to be white to align all the text on the left side and give some slight padding for all the paragraphs we want to so game types power we want to get some uh padding and to get the margin bottom to be zero so that we don't have any separation on the bottom for the links we want to set only color to be white so as our background is dark we want all the colors to be all the text colors to be white so for the votes i will give some margin on the left side and display flex so they're all aligned and for the count i will give a slight margin on the left side so it's 5 pixels and for the labels i want just to center centrify them so justify content center for our votes i will put the colors obviously for what's up i will put this green color and for the votes down the color is going to be this red one and for the counts uh we want just to keep a slight separation on the left on the right side on the right side is going to be 10 pixels because i want to separate both down and votes up a little bit and to align them a vertical line is going to be super so they're like in the middle for our text description i'm just going to set this padding to be 20 pixels and that's it then for screenshots uh i want to give a little bit margin on top so it's uh five pixels then for the width i want to give it uh 50 minus 10px because we want to display two screenshots in a row so this is why the width is 50 pixels minus 10 pixels is going to be our margin so on every even child and child even we want to set the margin left to be 10 pixels so that we only have the separation in the middle and for our trailers we want to have a width 100 so the full width and to give it just slight margin on top and the bottom and with that i'm happy with the results what we have for now so the next thing which i want to do is i want to connect the data to your html page so to our html code so we actually have fetched already our uh all the information which we are going to be uh displaying here and the information is inside of our details component inside of the game variable so what we want to do inside of this child component this game tabs component inside of our ts file we want to create a new input so this is the input property which will be receiving uh the information so input is going to have a name of game and type of game so this is the game interface which we created before so i'm going to import that and then inside of our details component inside of the html5 file we want to add a property input game and to pass in our game so this is the way how to share the data between the parent and child components so we're just setting up the input and we're passing in our game so at this point we have all the available information inside of our game tabs and now we just want to go and to hook up that inside of our html file so let's do that so first thing which i want to do is on our game platforms i want to check if there is any platforms at all so that we don't display this platform's label if there isn't so i'm setting up ng if game platforms dot length so if it exits if the length is more than a zero so if it is i'm gonna use uh ng4 for looping to right through our array of platforms i'll let game of game parent platform so i'm using i'm setting up this game variable half our platforms and i'm just gonna use the lat uh last so that we detect which one is lacks last so that we don't display the comma on the last item so i will just put in the game platform the name so the name of our platform and uh after that i will just set ng if if it's not the last element set the comma if it's last element don't display this comma into our array so similar similar thing i want to do for publishers as well so we'll check if there is any publishers if there is the length grade of zero if there is i want to loop through our game publishers array and i will set the variable uh let publishers again i'm gonna use the last index and i will from publishers as well i'm just using name so again i'm checking if it's not the last element display the comma if it is don't display this comma then for our game website again i will check if there is a game website website property if it's not so that we don't display this website a label i will put inside of href game website which is the link of the website and i will display exactly the same text so i will put inside of the brackets game website so it will display the link the url inside of the text for the for the game description i will use the inner html input and i will just pass in the game description so we'll so this will just put in the raw text now for the ratings the ratings uh i will as we are also getting the the array return type so i will loop using the ng4 because we can have multiple ratings usually it's just it's just a one but we can have multiple them so i will assign the variable rating from game dot ratings array and i will check we get uh multiple ratings and i will just display the two ones so the first one is exceptional so i'm checking ng if if the rating title is equal to exceptional so this is like the top we will display our thumbs up and we want to use the variable account so from rating dot count if there is no count you want just to display zero and then afford our thumbs down i want to use the rating skip so basically if user has rated game as a skip uh we want to display the thumbs down so rating title is equal to skip and again we're using rating count for this rating as well and if it's not i'm gonna just set up the zero then i want to check if there is screenshots at all so ng if game screenshots length if it's greater than zero we want to display tabs sometimes we don't have screenshots so we don't want to display this tab at all and if we have a screenshot we want to loop through the array of screenshots and display the image so i will use ng for last screenshot of game screenshots so in the screenshot i will just use the image for our source and that will loop and display all the source images this can be optimized i mean sometimes to display just uh above the fold of the page so it's uh so it doesn't load all images before it's seen but we will leave it like this for now and the last tab is our trailers and the same thing as a four screenshots i will check if there is uh any trailers because uh trailers as well are not displayed for every game so ng if game trailers length is greater than zero obviously so we'll we want to loop through the game trailers array i will set the variable that trailer and just going to loop and then just in the source uh input i will put trailer data max which is actually the max resolution we want to display the trailers of the max resolution that is the property they used and now let your preview that is the all the data which will be hooking up in our in our games component so let me preview what we actually got and now if you refresh our page you can see that uh on the about section the platforms are now hooked up array and as you can see the commas are just for the elements which are not the last so the platforms are displayed correctly publishers rockstar games so this looks good for the website it's hooked up to their website and you can click them it redirects you to a new tab so this is this looks awesome and uh below that we have the description and as you can see the ratings yes look i mean they look okay to me there is a lot of thumbs up so this is very very popular game so if you look on the screenshots tab that is nice we have uh loaded these screenshots so it gets you in a row this nice matching circulation and for the last one with the trailers uh actually for this game we have multiple trailers so let me see yeah i'm not gonna play them longer but as you can see it looks correct so this basically wraps up our application so we have we have built everything from scratch so just to sum up we have this homepage which loads our games by default on metagrader ratings so and we can build this search on top so if you type in some game let's say soccer july soccer you can get the preview of the games also except sorting so it's probably quite released or any other uh criteria so that looks nice also if you want to check more about the game itself you can click any of the games and we load up the details game and you can see as well and uh for this game you can see now there is no trailer so it doesn't display with the last tab but it displays screenshots clicking and about section as well so that's it [Music] you

Channel: freeCodeCamp.org

Views: 180,846

Keywords:

Id: LiOzTQAz13Q

Length: 72min 54sec (4374 seconds)

Published: Tue May 18 2021