- Overview
- Transcript
2.6 Creating a Component With the CLI
In this lesson we're going to see how we can create our first brand new component from scratch using the CLI.
1.Introduction6 lessons, 42:00
1.1Introduction00:48
1.2Get Started With Angular-CLI11:09
1.3Developing With Angular-CLI13:17
1.4TypeScript vs. JavaScript06:54
1.5Angular Modules From the CLI04:31
1.6CLI Options05:21
2.Get Started With Angular7 lessons, 42:38
2.1Bootstrapping the Application04:30
2.2The Application Module04:15
2.3The Application Component08:06
2.4Component Styling03:06
2.5Global Styling05:11
2.6Creating a Component With the CLI09:34
2.7Creating a Service With the CLI07:56
3.Core Concepts7 lessons, 55:20
3.1Component Trees06:20
3.2Dependency Injection06:52
3.3Content Projection05:38
3.4Component and Directive Lifecycle Methods06:31
3.5Component-Only Lifecycle Methods05:28
3.6Decorators07:36
3.7Models16:55
4.Template Deep Dive11 lessons, 1:10:56
4.1Basic Data Binding With Interpolation05:35
4.2Property Bindings07:07
4.3Attribute Bindings03:29
4.4Event Bindings08:16
4.5Class and Style Bindings05:44
4.6The `NgClass` and `NgStyle` Directives05:04
4.7The `*ngIf` Directive04:41
4.8The `*ngFor` Directive09:29
4.9Inputs05:33
4.10Using Pipes in a Template07:31
4.11Using Pipes in a Class08:27
5.Forms10 lessons, 1:45:41
5.1Handling User Input With Template Reference Variables07:06
5.2Template-Driven Forms11:10
5.3Template-Driven Forms: Validation and Submission14:00
5.4Reactive Forms11:26
5.5Using a `FormBuilder`08:01
5.6Reactive Validation With Built-in Validators14:53
5.7Creating Custom Validators for Template-Driven Forms12:18
5.8Creating Custom Validators for Reactive Forms08:26
5.9Observing Form State Changes12:40
5.10Working With the `@HostListener` Decorator05:41
6.Routing9 lessons, 1:15:10
6.1Defining and Configuring Routes07:53
6.2Rendering Components With Router Outlets10:14
6.3Using Router Links for Navigation05:25
6.4Navigating Routes Using the Router06:24
6.5Determining the Active Route Using an Activated Route07:16
6.6Working With Route Parameters10:42
6.7Using Route Guards07:36
6.8Observing Router Events10:55
6.9Adding Child Routes08:45
7.Using the HTTP Client5 lessons, 56:24
7.1Sending an HTTP Request10:52
7.2Handling an HTTP Response11:22
7.3Setting Request Headers12:33
7.4Intercepting Requests09:04
7.5Finishing the Example Application12:33
8.Testing10 lessons, 1:23:27
8.1Service Unit Test Preparation10:45
8.2Unit Testing Services13:24
8.3Component Unit Test Preparation12:35
8.4Unit Testing Components07:27
8.5Unit Testing Component Templates06:58
8.6Unit Testing Pipes04:41
8.7Unit Testing Directives04:56
8.8Unit Testing Validators04:48
8.9Unit Testing Observables11:37
8.10Unit Testing HTTP Interceptors06:16
9.Building for Production1 lesson, 03:40
9.1Building for Production03:40
10.Conclusion1 lesson, 01:32
10.1Conclusion01:32
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.