Angular 5 Components

Now we did the Angular 5 set up here

We did our base Angular 5 program startup and test here

Now in this part we will see about the Angular 5 Components.

So Let us start:


Angular components are considered as the basic building blocks of angular app.

Angular components can be found inside “/src/app” folder

Angular components is made up of:

  • A component decorator, which help to set CSS, animations and many more
  • Imports needed by the component to work
  • A Class (here lies the component’s logic).


Let us generate components:

  • Open the cmd in the <project_name> location
  • Type the command
    • $ ng generate component <component_name>
    • You can also do this by using command
    • $ ng g c <component_name>
    • Example:
      • $ ng g c home
      • The above command will generate the component with other files as:
      • create src/app/home/home.component.html (23 bytes)
        create src/app/home/home.component.spec.ts (614 bytes)
        create src/app/home/home.component.ts (262 bytes)
        create src/app/home/home.component.scss (0 bytes)
        update src/app/app.module.ts (467 bytes)
      • It also maps the new component in the app.module.ts as from above.
  • Now if you check the above files let us go through each one by one:
    • home.component.html : This file contains the html for the home component. All the html changes need to be changed for this component needs to be added in this file.
    • home.component.ts : This file contains the logic need to be performed for this component under the class “HomeComponent” inside.
    • home.component.scss : This file contains the CSS styling that needs to be added for the component.

Now in next level we will see Interpolation, Property Binding & Event Binding. Click Here


5 thoughts on “Angular 5 Components

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.