FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • 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.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01: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.

Back to the top