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:
- Template - Every Angular component has an associated HTML template that defines a view to be presented in a target environment.
- 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.
- 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
- 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:
- Lets start by creating a new Angular project using the Angular CLI ng new project-name command as shown in the example below:
- When you are prompted with Would you like to add Angular routing? Choose Yes by pressing Y.
- When you see Which stylesheet format would you like to use? Choose CSS and press Enter.
- After the project gets created, navigate to the project folder:
- Run the project by executing the following command:
- 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/:
- 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:
- 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
- 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: src/app/navbar/navbar.components.ts
- 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:
- 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:
- Next, add the following CSS to the style-sheet file of navbar component at src/app/navbar/navbar.component.css:
- Go to your browser and check your application page at http://localhost:4200/. The resulting page should be something like this:
ng new my-sample-app
cd my-sample-app
ng serve --open

ng generate component navbar
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:
src/app/app.module.ts
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';
@NgModule({
declarations: [
AppComponent,
//Enry of NavbarComponent
NavbarComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
<app-navbar></app-navbar>
<router-outlet></router-outlet>
.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 a.active {
background-color: #0446aa;
color: white;
}

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