2.6 Creating a Component With the CLI

Hi folks. In this lesson we're going to create our first brand-new component from scratch. Since Angular 2, we have not had controllers in the framework. Instead, components are backed by class, which contains the behavior and logic of the component. Components are one of the most common parts of an Angular application, and we'll create lots of them in most of the apps that we build. We can create components easily using the CLI. So our example game is going to need a start screen where the player can enter their name and maybe choose some game options. This will be the start component which we'll create now. We need to stop the server running to create a new component or open up another command line. In order to generate a new component, we can use the ng generate command. So we need to tell the generate command what we want to create. In this case, it's a component. And we need to give a name for the component. So the command takes a few seconds to run, but it's pretty quick, it's just creating a few files. And we can see in the output when it finishes that it has created four new files for us, start.component.html, start.component.spec.ts, start.component.ts and start.component.scss. We should also find that the CLI has updated the root app.module with a reference to the new component. So we can see that the StartComponent is now being imported into the AppModule, and it's being passed into the meta object, passed to the NGModule decorator as part of the declarations array. If I just refresh the Editor window here. Then I see we get this new folder called Start and that contains all of the new files that the CLI has generated for us. And as we saw earlier in the course, the naming convention is name, type and extension. So that everything is nice and consistent, and it's super easy to see which file is which. Don't underestimate the positive effect that this has on an app's maintainability. This is really important. When your app grows, consistency and the ease of finding files becomes much more important. Notice also that we ran this command from the root of the application, the js-blackjack folder. But the CLI has put our new component in exactly the right place, in the app folder next to the home folder. So let's open each of the new files up. So the html file, which is the template for the component, contains just a very basic template, just in case we want to start using the component straight away. It's just a paragraph with some hard coded text that says start works. The scss file is completely empty. The spec file that gets created has quite a lot of code in it already. We'll come back and look at the tests later in the course. We won't worry too much about all of this code for now. The StartComponent just has the outer skeleton for a typical component. We import a couple of things from the Angular core module, the Component decorator, and something called OnInit. So OnInit is an interface. And we can see that StartComponent implements this interface. And what implementing this interface means is that the component must have an ngOnInit method. So, if we get rid of that, we then see some underlining here, and it tells us that it incorrectly implements the interface OnInit. So, let's bring that back. The OnInit method is actually a life cycle method, and we'll come back and look at life cycle methods in much more detail quite soon in the course, so don't worry too much about that for now either. So, this component file contains all of the boilerplate for a simple component, and it includes the Component decorator, which links the template and the style files, and it gives us the app-start custom element selector. So this is all things that we would have to do ourselves, but which the CLI does for us. So we don't need to worry about doing it manually each time. So let's add some markup for our new components. This can go into the HTML file. So this is just regular HTML mockup at the moment, nothing is wired into the component yet. And it's just a very basic form. So we need to add some more styling, but we need to add it to a few different places. Some of the styles for the form elements will be quite generic, so we can add these to a new file in the scss folder, in the assets folder called _forms.scss. And inside this file we can add the following styles. So this is just some basic layout and some minimal styling. We'll get to see how it looks shortly. Don't forget to update the styles.scss file to import this new style sheet. The StartComponent itself can have some component level styling as well in the home.component.scss file In the start.component.scss file. So that's all the styling that we need at this stage. Now we just need to use the new component somewhere. The StartComponent will be a child of the HomeComponent. So we need to add an element for the StartComponent inside the template of the HomeComponent which is homecomponent.html. We can add it after the header. The name of the custom element matches the selector property in the start.component.ts component meta-information object. So now we should be able to see the template for the StartComponent when we view the app running. And we can see that that is what the start screen should look like. And for some reason, it looks like the Aces high check box is not being displayed. And it looks like I've forgotten to include an element, so I'm just gonna go back and add that in quickly. And there should be a span with the class checkbox after this. And the checkbox is now present. It doesn't work yet, we'll come back and wire that up later on. In fact, nothing works, this is just raw HTML with no special Angular bindings or anything at all. But we will come back and make all this work very soon. So in this lesson, we walked through the process of creating a component using the CLI. Which usually goes something like create the component, add the template and styling, and sometimes the component logic. And then use the custom element for the component in another component's template. Thanks for watching.