Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Generating a Component

8:13 with James Churchill

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

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": {}
  }
}

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

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

Sign up