How to Create Components in Angular 4

How to Create Components in Angular 4 (the easy way)

If you have created already your first Angular project, then from the command line you can run from your project folder:

ng generate component dotsway-component.component
or use command shortcut:
ng g c dotsway-component.component

This will auto generate your component files which they consist of (it will be automatically generated in /src/app/your-component-name/):

*.css "Stylesheet"
*.html
*.ts "TypeScript"
*.spec.ts "used for unit testing"

Also the ng while creating the new component will add 'import' to the main app module with the new component name to be included in your project application.


I mentioned above that this is the easy way to create a component, the other way is simply creating a folder with your component name inside the /usr/app/component-name and then create all the files manually and write the code.


Now how to use our new component in the html ? simply add the new component name tag which in our above example is dotsway-component.component to the main app.component.html like below example:
And now the tags will be replaced by the html in dotsway-component.component.html


Subscribe to
for video tutorials updates

2 thoughts on “How to Create Components in Angular 4

  1. Pingback: Angular 4 Component Structure and Properties

  2. Pingback: Angular 4 Routing and Navigation Tutorial

Comments are closed.