Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Angular 3
  • Overview
  • Transcript

2.2 The Projects Component

Now that we have created our project model, the next step is to create our project's component, which will display a list of projects to the user. So let's go ahead and inside of the app directory, let's create projects.component.ts. And once again we will begin by importing the component decorator, and let's go ahead and create our component. So we have the Component class, and underneath this, we will export the class ProjectsComponent. All right, now let's add a selector here. The selector for this will be projects, and the template URL will of course be templates/projects.component.html. Now let's go ahead and create that template, since it's going to be very simple, for now anyway. We will create in the templates directory, projects.component.html. And in here, let's just create an h1 element, and on this h1 we're going to use an Angular directive *ngFor. Now you might wonder what the asterisk is about, the truth is that this version of ngFor is actually syntactic sugar for a longer version, and nobody really ever uses the longer version. And so the asterisk lets Angular know that it needs to expand this into the proper version before actually doing its thing behind the scenes. So we'll use asterisk *ngFor, and in here we will create a variable project. So we'll say, let project of projects. So we need to have an array of projects, and we're going to loop over this array of projects, and we're gonna create an h1 element for each one of these projects. And inside this h1 we'll use the double curly braces to interpolate a value here, and that value will be project.name. Now, this obviously raises the question, where do we get our array of projects from? So let's come back to our component here, and let's talk about that. We're gonna import two more things here. First of all, for type checking we're going to import the project class from the project model that we created in the last lesson, and then we're also gonna import something else from Angular core, and that is OnInit. And OnInit is an interface or basically a parent class that we want our ProjectsComponent to implement. So we'll go ahead and say ProjectsComponent implements, and we will implement OnInit. And just to be clear, implements here is actually keyword from typescript. This is not part of native VS6 classes, instead implements allows us to implement Oninit which is an interface, or basically it tells Angular that our ProjectsComponent class here should implement certain functions. The function that OnInit expects us to implement is the ngOnInit function. And ngOnInit is basically a life cycle hook, it will be called by Angular to indicate that Angular is done creating the components. Just to be clear, actually implementing OnInit in this way is not strictly required, if we create a class that has an ngOnInit function, even if we don't implement OnInit, it will still be run as a lifecycle hook. But doing this is kind of considered best practice within Angular. Now you might be wondering why can't we use the constructor class, which will be called when this class is instantiated. And we will eventually be using the constructor for this and other components. But ngOnInit is a little bit better because it's run closer to the time when the user will actually see the component on the screen. So what do we have to do inside ngOnInit? Well in here we need to populate that projects array. Now if we'd like, we could start by defining projects as a property of this class, and this will allow us to give it a type. So we can say that we want to have a projects property on this class, and it is going to have a type of project array. So now from here within ngOnInit, let's go ahead and populate that. For now we'll just do it manually. We'll just say this.projects is an array, and inside this array let's add an object. This object will have an id of one in a string. We'll give it a name of First Project, and that's really all we'll add for now. Now I wanna point out something. If we come over here to the typescript server, notice this line right here. The type of an object with an id is a string and a name is a string is not assignable to the type Project. And then notice down here property description is missing in this type. And then notice a little bit further up, that type as an array is not assignable to project array. Basically what typescript is telling us here, is that we've defined this projects property as something that should be an array of project objects. However, what we've created here is not an array of project objects. Now you might think well it's because we didn't use Project here as a constructor. But that's not exactly the case. If we had created just a quote, raw, object here, with all the right properties, then the typescript compiler wouldn't complain because it sees that the object we have created matches the project type definition. However, the object we've created here does not actually match the project type definition. However, this doesn't prevent typescript from compiling, and it doesn't prevent this code from running as proper JavaScript. So we can actually see this in action, if we add our ProjectsComponent here our app component. So let's go ahead and open up our templates, and we have the app component. And just above our router-outlet here, let's just do projects. All right, so once we save that, we can come back to the browser here. And of course, it will refresh automatically for us and when that happens you can see that nothing loads. And if we come down here to the terminal you'll see why. Now I'm showing you this error because it's probably something you're going to run into a few times of you're just getting started with Angular 2. You'll build a new component, put it into action, come back to your browser and something will be wrong. And the problem is if project is an angular component, then verify it as part of this module. The problem is that we created a component here, projects, but we haven't actually included it in the module. So what we have to do is is open up our app modules file. Let's go ahead and import the ProjectsComponent, and then down in our declarations, let's go ahead and include ProjectsComponent. So with those in place, we can come back to the browser, the browser will refresh, and you can see we have our First Project showing up here. Now just to make sure that this would actually load an array, let's just go ahead and duplicate this, and we will add a Second Project. And now if we come back and let our page refresh, you can see that we have a First Project and a Second Project. So this is the beginning of our project list. Now right now we're just displaying this on the home page as you can see. However, we definitely want to include multiple routes in our application. So in the next lesson, we'll go ahead and set up a route for our project list.

Back to the top