When you create a more complex app, it's a good idea to break it up into multiple components. That way, it's easier to update and maintain. Learn how this will make your application easier to maintain in the future.
- [Instructor] When you create a more complex application, it's a good idea to break it up into multiple components. That way it's easier to update and maintain. So let's take a look at how that works by creating a simple subcomponent that displays each artist's data. So what we're going to do is take the display of each artist's information which is within each of these list items and make a separate component out of it. Now this is going to take a lot of moving code around so there is some potential for messing this up.
Let's go ahead and start off by creating a new component. So right here, I'm going to right-click and create a new file, and I'm going to call this component artist-item and it's going to have a .ts extension. Now in here we'll need to import the component from Angular core library. With this we can use a decorator, just like we did with the other component and, of course, this decorator is going to get a configuration object, and we're going to type in a few things that we're going to need here.
For example, our selector, which will be the html tag that we're going to create in our template that is going to call this component is going to be called artist-item. So we haven't created that yet but we will in a few minutes. So next up, we'll need to go ahead and create a template so we'll put in a templateUrl, and I'm going call this in the partials folder, and in the partials folder I'll create an artist-item.html file.
In addition to that, we're going to need to send, of course, some css, and we'll create that as a separate document under the css folder, and again, I'll call it artist-items.css. Now remember this should be an array of elements, and we only have one css file that we're going to use here. And finally, I'm going to use something you may have not seen before called inputs. So whenever we are feeding this new component some information, we're going to have to pass it along as a property of this tag.
So we create this tag, we can add a property called, and we will call this artist. And artist is going to be the variable that we feed into this component that is going to have the information for each artist, which will be like their name, their photo, and their renown. Now be really careful here with the plurals. It's really easy to sort of type in styleUrl instead of styleUrls, and sometimes I tend to put input instead of inputs.
So be careful here. Of course, now we need to export this component, so we'll export a class, and we'll call this ArtistItemComponent. That's not really going to do anything. It's really just going to be processing this partial and this css as we go through each of the list items. Let's go ahead and save this. So next up, we need to add this into our modules. In our app.modules.ts, right now we are importing AppComponent from component.app, so we'll need to import this new component.
We called it ArtistItemComponent, and it's in the component called artist-item. We'll also need to add it as a declaration. Remember this imports section lets Angular know which features of Angular I want to add into my modules. Then this declaration lets Angular know which components I'm going to be using in my application.
Last one just lets Angular know which one is the main component, the root component that is going to launch our entire application. All right, let's go ahead and save this one. Now, of course, we need to modify this component, AppComponent, because what we need to do here is make sure that we import the artist component into this component. This is the root component, so whenever we want to add something here, we'll need to import it. We call this ArtistItemComponent, and it's going to import from a file called component.artist-item.
Let's go ahead and save this one. Next up, we'll have to make some modifications to our app.html and also create all of the other files. In app.html, we are going to cut this section of code to the Clipboard since we're going to need it later. We'll have to replace it with the new tag that we just made called artist-item and in this artist-item tag, I need to go ahead and I'll just give it a class of content.
This is just a css class, so it doesn't really do anything other than make the information look nice. Then in here, we need to pass along the information for each one of these artists. So if you remember, we have a temporary variable here called item that has the data for each artist. So we need to be able to pass that to our subcomponent. We can do that using a property. Remember to do properties you use brackets. We're going to call this property artist, because that is the input that this new component that we created expects.
This component artist-item is expecting an input of artist. That is the property that we are passing right here. So this will pass along our item variable, again that comes from this let statement. It will use this new tag that will be replaced by our component. Now I can go ahead and save that. Let's go ahead and create another partial. We cut all this information out of here. We're going to need to create a new file and paste that in there.
This is going to be called artist-item.html and we'll paste all that data here. Now when we pass this information to the partial, we're not going to be using this item variable anymore. We're using something called artist, so I need to update these to say artist. All right, let's go ahead and save this. If you remember, the last piece of my component was specifying that I'm going to use a file called artist-item.css.
It'll have the css only for that component, so we'll need to create that here. In here, we'll need to go to our page.css. We have a section here called artist-item.css styles. Really at the bottom of the css file. We can just grab that and cut that out, and now our page.css just has the css for the page and then this artist-item is going to have only the code that is used for artist items whenever those exist within our application.
If we did everything right and it looks like we did, and it's actually quite an accomplishment to get all that done in a single sort of fell swoop without any errors. Everything is going to look pretty much like it did before. The difference is that we have split up this application into a separate component and that makes everything easier to work with and maintain in the future. You can see that we pass information to our subcomponents through properties. They are just like the html properties that you are used to.
We use the same thing that we did when we created the main component. We created sort of our own tag that we were able to replace with that component. This is making our application more modular and hopefully that will make you understand how Angular works with components a little better.
In this course, Ray Villalobos shows you how to start using Angular 2 in your own projects. He starts by defining what exactly Angular 2 is and how it differs from AngularJS 1. Then, once the basics are out of the way, he sets up the template that will drive the project and starts coding. Ray shows how to divide your project into modules, work with events, style content with CSS, and create components and subcomponents. Plus, you can find out how to change content dynamically using data pipes.
Note: Members can find a template to download in the exercise files.
- What is Angular 2?
- Setting up a template
- Creating a simple component
- Using multiple modules
- Displaying data in templates
- Working with events
- Creating a subcomponent
- Filtering content through data pipes