3.3 Create the Projects Component

Hello everyone. I am Reggie Dawson. Welcome to the build a portfolio site with Angular 2 course for Tuts Plus. In this video, we will set up the listing to display all of the projects. Essentially, this will be pretty much identical to what we did on the home page with a small change. First create a folder named projects. After that, create a file called projects.components.ts. Here we are grabbing OnInit, of course, since we will be using that to grab our data when this component is created. Then we have our service, project-interface, router, and our pipe. After that, we have our component decorator with the templateUrl, styleUrl and our truncatePipe. And then we add our class which implements OnInit. Again, we have our project-interface, but here we are using it against an array. Then we have our constructor, because we are grabbing the project service and router. After that we have a chooseProject method that is identical to the one in the home component. Again, we are navigating to the the detail route while passing the route parameter. This way it doesn't matter what route the request is coming from, as long as it supplies the route parameter. Incidentally, if we navigate to the detail route by typing in a URL, we will get the error page since that is not an existing route. If we supply the detail route with the actual id we want, then we can access the project by typing it in the address bar. We will see that later when we preview our project. Now the only difference on the code and on the home component, is how we grab the projects. This listing will display all of the projects and doesn't care how many we have. We limited the projects in the home component because we only needed three. As a result. we only chain in one then statement to the getProject method and then use that to set the data in the project the array. Next, create a file called projects.html. This time we'll wrap the entire block in a container. Then we add a title that says, all of our projects. Then we add the same code that displayed our projects on the home component. We can actually cut and paste the same code from the home component, if we like, and it will work perfectly. It doesn't matter if we have three or 3000 projects. It will display a template for each item in the array. Just to let you know that Bootstrap's grid is based on a maximum of 12 columns across. As a result to make three equal size containers I had to use four columns each. If I would have grabbed for projects from our data and pass it to the home component, we would have a second row which is what we didn't want. Keep that in mind when designing with the grid system like Bootstrap's. After that, the last thing we need to do is create a file called project.css. Inside of this file, we first add a rule for a spacer so that it's attached to the title row. This provides some spacing around the title and makes it look a little bit cleaner. Then we add the same styles to our button that we used on the home page in our project listing. After that, we are finished with this component and can save your work. Our project is almost ready for us to preview. In the next video, we will add the about and error component and finally take a look at our app.