How to Create and Use Components in Angular?

In Angular, components are essential building blocks for developing an application. In simple words, an Angular component is a piece of your application's UI that is controlled by the Angular framework. Components might include things like the header, footer, or the entire page, depending on how reusable your code needs to be.

Every Angular component is made up of three parts:

  1. Template - Every Angular component has an associated HTML template that defines a view to be presented in a target environment.
  2. Class - Just like in any other programming languages, in Angular, a class acts as a template for creating an object. Each Angular component contains a TypeScript class that holds application data and logic. A class is created with a @Component() decorator. A Decorator is a function that allows to add metadata to a class, method, accessor, property, or argument. A decorator is used with the form @expression, where expression is the decorator's name.
  3. Metadata - This is the additional information about a class. The metadata helps to determine if a class is a component class or a regular class.

Root Component in Angular

In every Angular application, there is at least one root component that connects a component hierarchy to the page document object model (DOM). The following files make up the root component of your Angular application, which can be found in the src/app/ directory:

  • app-routing.module.ts - This file contains routing configuration. The purpose of this file is to load and configure the router in a separate file for readability. The module class name of this file is AppRoutingModule by convention and it is imported by the root AppModule in app.module.ts file.
  • app.component.css - This is the component view's stylesheet file. Every component has one or more associated style-sheet files. This file can also be in other formats: CSS, Sass, Stylus, or Less.
  • app.component.html - This is the component view's HTML template file.
  • app.component.spec.ts - This is the component's test file which is also known as a spec file. The file extension .spec.ts helps tools to recognize it as a file containing the tests.
  • app.component.ts - This file contains all of the component's code for controlling its functionality.
  • app.module.ts - Every Angular application contains at least one NgModule class, the root module, which is commonly referred to as AppModule and is in the src/app/app.module.ts file. This root NgModule is to define Angular modules as well as to startup your application.

How to Create a new Component in Angular?

Use the following command to create a new component in your Angular project:

ng generate component user-detail

The above command creates a directory src/app/user-detail and inside that director the following four files are generated:

  • A TypeScript class file with a component class named UserDetailComponent.
  • An HTML template file for the component.
  • A CSS file for styling the component.
  • A test file for UserDetailComponent.

Creating and Using Components in Angular Example

In this example, we will learn how to create components in an Angular application from scratch. Follow the steps below to complete this example:

  1. Lets start by creating a new Angular project using the Angular CLI ng new project-name command as shown in the example below:
             ng new my-sample-app
  3. When you are prompted with Would you like to add Angular routing? Choose Yes by pressing Y.
  4. When you see Which stylesheet format would you like to use? Choose CSS and press Enter.
  5. After the project gets created, navigate to the project folder:
            cd my-sample-app
  7. Run the project by executing the following command:
            ng serve --open
  9. If your installation and setup was successful, you should see a default welcome page like the following on your browser, running at http://localhost:4200/:
  10. How to create a new Angular Project
  11. Now, lets create a navbar component that we can re-use in many views. Open a new terminal and navigate to your project root directory and execute the following command to create a navbar component:
            ng generate component navbar
  13. The above command will create the following component files in src/app/navbar/ directory and will also register NavbarComponent to the src/app/app.module.ts file:
    • navbar.component.css
    • navbar.component.html
    • navbar.component.spec.ts
    • navbar.component.ts

    If you go to src/app/app.module.ts file of your Angular project, you will see entry of NavbarComponent as shown in the example below:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    //Enry of NavbarComponent
    import { NavbarComponent } from './navbar/navbar.component';
      declarations: [
        //Enry of NavbarComponent
      imports: [
      providers: [],
      bootstrap: [AppComponent]
    export class AppModule { }
  14. Now, go to src/app/navbar/navbar.components.ts file and find the value of selector. Here, the value of selector is app-navbar as shown in the example below:
  15. src/app/navbar/navbar.components.ts
    import { Component, OnInit } from '@angular/core';
      selector: 'app-navbar',
      templateUrl: './navbar.component.html',
      styleUrls: ['./navbar.component.css']
    export class NavbarComponent implements OnInit {
      constructor() { }
      ngOnInit(): void {
  16. Go to the root src/app/app.component.html file and remove everything except this line <router-outlet></router-outlet>. Copy the value of selector from the newly created src/app/navbar/navbar.components.ts file to src/app/app.component.html. Your root src/app/app.component.html file should look like this:
  18. Now, go to navbar component HTML view file at src/app/navbar/navbar.component.html and add the HTML code to display navbar to it as shown in the example below:
  20. Next, add the following CSS to the style-sheet file of navbar component at src/app/navbar/navbar.component.css:
    .navbar {
      background-color: rgb(82, 81, 81);
      overflow: hidden;
    .navbar a {
      color: #f2f2f2;
      text-align: center;
      float: left;
      text-decoration: none;
      font-size: 16px;
      padding: 14px 16px;
    .navbar a:hover {
      background-color: #f2f2f2;
      color: rgb(46, 45, 45);
    .navbar {
      background-color: #0446aa;
      color: white;
  22. Go to your browser and check your application page at http://localhost:4200/. The resulting page should be something like this:
  23. How to create a new component in Angular application

Congratulations! you have learned how to create and use a component in an Angular application.