Generate components with the Angular CLI

Mike Brocchi
InstructorMike Brocchi
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 6 years ago

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

[00:00] Type "ng generate component" to indicate that you want to generate a component. Then specify the name of the component. In this case I'll use "people" as the name of the component. In the code editor we see our new people folder that contains an empty style file, a simple HTML template file, the TypeScript component file, and a test file.

[00:21] Also notice that there have been five file changes made -- the four new files, as well as a change to the app.module file. The people component has been imported and declared with an app.module.

[00:33] As a shortcut, one generating component instead of typing out "ng generate component," there is a shorthand to type "ng," "g" for generate, "c" for component, and then the name of the component. These two statements will yield the same results.

[00:47] Type "ng g c people" to indicate the people folder and "person" as the name of the new component you wish to generate. As you can see by the generated output, the person component has been created underneath the people folder.

[01:01] The path you specify for generated and component is relative to the directory in which you are creating it. To create an address component underneath person, navigate it to the person directory which was just created. Once there, you can generate the address component.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today