Generating a Component

8:13 with James Churchill

Let's use the CLI to generate a new component.

Teacher's Notes
Video Transcript
Downloads

Available Schematics

The following schematics are available for use with the ng generate command:

Class
Component
Directive
Enum
Guard
Interface
Module
Pipe
Service

Customizing the Component's Selector Prefix

There are two ways that you can customize the selector prefix when generating a component. You can use the ng generate command's --prefix option like this:

ng generate component [component-name-to-use] --prefix [selector-prefix-to-use]

Or you can configure the selector prefix to use via the .angular-cli.json configuration file's apps[].prefix property.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "test-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "[selector-prefix-to-use]",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

0:00
Let's generate another app, this time I'm gonna generate an app into an existing
0:05
GitHub repo named my-awesome-app that I cloned to my system earlier.
0:15
Here's the directory for my repo, let's browse into the repo's directory.
0:21
If we list the contents of the directory using ls -a,
0:25
we can see that it's empty except for the .git directory and the .gitignore file.
0:32
We want the CLI to generate our app into this folder, so
0:36
let's browse back up to the GitHub folder.
0:42
Remember, to generate an app we use the ng new command,
0:45
followed by the name of the app that we want to generate.
0:49
So, my-awaesome-app, by default, when you generate an app,
0:56
the CLI initializes a git repo, and makes an initial commit.
1:01
Now that's convenient most of the time,
1:03
we don't want to do that now, as we already have a git repo configured.
1:08
Luckily, we can skip that part of the process by adding the --skip-git option.
1:16
As we saw just a bit ago, the CLI by default doesn't set up routing.
1:21
If our app is going to need support for routing, we can instruct the CLI to
1:25
include a routing module by including the --routing option.
1:31
But this app won't have more than a single route, so I'm going to remove that option.
1:38
Press Enter to run the command.
1:48
Now, let's browse into the project's directory,
1:53
and make our initial commit; git add ., && commit -m "Initial commit".
2:03
Now let's see how we can use the CLI's generate command to modify our app.
2:08
If we type ng help generate we'll see a list of the available schematics.
2:14
Schematics are blueprints for creating new items within our app.
2:18
The CLI includes schematics for creating classes, components,
2:23
directives, pipes, services and more.
2:27
To generate a component we run the ng generate command
2:32
followed by the name of the schematic we want to use, in this case component.
2:38
After the schematic name, we need to provide the name for
2:43
our component, let's use my-test.
2:47
The name of the component can be formatted multiple ways, including kabob case,
2:52
like I have it here.
2:54
Camel case, like myTest or Pascal case like MyTest.
3:02
The CLI will convert the provided name to the appropriate format for
3:06
the specific target.
3:08
For instance, for the file name the CLI will convert the provided name to Kabob
3:12
case and for the component class name it'll use Pascal case,
3:17
let's press Enter to run our command.
3:20
Here in the terminal we can see that the CLI create four files and
3:25
updated a single file.
3:27
Let's review the changes to our project in Visual Studio code.
3:40
The CLI created a new directory for
3:42
our component files named my-test underneath the src/app directory.
3:51
Within that director are four new files.
3:55
My-test.component.css, which are the css styles for our component,
4:01
my-test.component.html, which is the HTML template for our component.
4:07
my-test.component.spec.ts, which is the spec file for our component,
4:12
and finally, my-test.component.ts, which is the class for our component.
4:18
Before a component can be used, it must be declared within an app module.
4:26
The CLI saved us a bit of time and updated our app module for us.
4:33
It added the appropriate import statement and
4:36
added the component to the NgModule declarations array.
4:41
Having a directory generated for our component files is helpful and
4:45
often what we want.
4:46
But what if you wanted the component files generated directly within the app
4:50
directory, or another directory altogether?
4:54
The ng generate command supports adding relative paths before the component name.
5:00
Suppose we wanted to generate an add user component within a directory named users.
5:07
We could do it like this $ ng generate component users/add-user.
5:14
To test this command without making any changes,
5:18
we can add the --dry --run option.
5:25
Using the --dry --run option allows us to preview the results of the command.
5:30
Notice that a component was generated within the directory named add-user.
5:35
That's within the user's directory.
5:39
While that might be what we were expecting, what if we wanted the component
5:43
files to be generated directly within the user's directory?
5:47
To do that we could add the --flat option.
5:58
And that gave us the result we were looking for.
6:08
We just saw that when generating a component,
6:11
the CLI will register the new component with the app module.
6:15
But you'll still need to determine how your component will be used
6:18
from within your app.
6:20
Let's start with making a simple change to our component's template.
6:27
Let's replace this text with, Hello from our test component.
6:36
Now let's add our component to the template for
6:39
our top level component app.component.
6:45
Well, before we can do that, we need to know what the selector is for
6:48
our component.
6:53
We can see here that the CLI set the @Component decorator
6:58
selector property to a value of app-my-test.
7:03
By default, the CLI will generate a selector
7:06
using your provided component name, prefixed by the text app.
7:10
The prefix that the CLI uses is configurable via the Angular CLI JSON
7:16
file, or by using the ng generate commands prefix option.
7:21
For more information see the teacher's notes.
7:24
Now that we know our components selector, let's update the app.components template.
7:29
Let's add our component right bellow this heading so it's easy to see on the page.
7:42
And let's run our app using the ng serve command, this time including the -o
7:48
option which will cause the CLI to open our app into our default browser.
7:59
And here's the output from our component.
8:04
Components are just one type of item that the CLI can generate.
8:08
In our next video, let's see how we can generate a service for our app.

You need to sign up for Treehouse in order to download course files.

Using the Angular CLI

Generating a Component

Available Schematics

Customizing the Component's Selector Prefix

Sign in