Angular Tutorial Installing Angular on Windows, Ubuntu/Linux, and Mac OS How to Create a New Angular Project How to Create and Use Components in Angular Modules in Angular Services in Angular Calling REST APIs in Angular Downloading PDF File in Angular

How to Create and Use Components in Angular?

Last updated Apr 25, 2024

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

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:

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

When prompted with "Would you like to add Angular routing?", Choose Yes by pressing Y.
When prompted with "Which stylesheet format would you like to use?", Choose CSS and press Enter.
After the project is created, navigate to the project folder:

cd my-sample-app

Run the project by executing the following command:

ng serve --open

If your installation and setup were successful, you should see a page like the following in your browser, running at http://localhost:4200/:

Now, let's create a navbar component that we can reuse in many views. Open a new terminal, navigate to your project's root directory, and execute the following command to create a navbar component:

ng generate component navbar

The above command will create the following component files in the src/app/navbar/ directory and will also register the NavbarComponent in 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 for 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 { }

Now, go to the src/app/navbar/navbar.component.ts file and find the value of the selector. Here, the value of the selector is app-navbar, as shown in the example below:

src/app/navbar/navbar.components.ts

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 {
  }

}

Go to the root src/app/app.component.html file and remove everything except this line <router-outlet></router-outlet>. Copy the value of the selector from the newly created src/app/navbar/navbar.component.ts file to src/app/app.component.html. Your root src/app/app.component.html file should look like this:

<app-navbar></app-navbar>
<router-outlet></router-outlet>

Now, go to the navbar component's HTML view file at src/app/navbar/navbar.component.html and add the HTML code to display the navbar, as shown in the example below:

<div class="navbar">
    <a class="active" href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</div>

Next, add the following CSS to the style-sheet file of the navbar component at src/app/navbar/navbar.component.css:

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 a.active {
  background-color: #0446aa;
  color: white;
}

Go to your browser and check your application page at http://localhost:4200/. The resulting page should look something like this:

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