How to Create a Component in Angular

In Angular, components are the building blocks of your application. Every UI element you see — buttons, forms, navigation bars — is powered by a component.

If you’re new to Angular or just brushing up your skills, understanding how to create and structure components is essential.

In this guide, we’ll go step-by-step on how to create, use, and customize a component in Angular — the right way.

What Is a Component in Angular?

An Angular component controls a part of the UI (User Interface).
Each component is made up of:

• HTML template – defines how the component looks
• TypeScript class – defines how it behaves
• CSS file – defines how it’s styled
• Metadata (decorator) – tells Angular how to use it

Example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.html',
  styleUrls: ['./hello.css']
})
export class HelloComponent {
  name = 'John Doe'; // Your component logic
}
Code language: JavaScript (javascript)

Step 1: Create a New Angular Project

If you don’t already have a project, create one using the Angular CLI.

ng new my-angular-app
cd my-angular-app
Code language: JavaScript (javascript)

This sets up a new Angular project with all required configurations.

Step 2: Generate a New Component

Angular CLI makes it super easy to generate components.
Run the following command:

ng generate component hello

or shorthand:

ng g c hello

This command will automatically create a new folder:

src/app/hello/

Inside it, you’ll find:

• hello.ts — Component logic
• hello.html — Template
• hello.css — Styling
• hello.spec.ts — Testing file

Step 3: Understand the Component Structure

Let’s break it down:

hello.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.html',
  styleUrls: ['./hello.css']
})
export class HelloComponent {
  message = 'Welcome to my first Angular component!';
}
Code language: JavaScript (javascript)

hello.html

<h2>{{ message }}</h2>Code language: HTML, XML (xml)

hello.css

h2 {
  color: #007BFF;
  font-family: 'Segoe UI', sans-serif;
}
Code language: CSS (css)

Step 4: Use the Component in Your App

Now that your component is ready, include it in your app’s main template.

Open src/app/app.component.html and add:

<app-hello></app-hello>Code language: HTML, XML (xml)

That’s it! You’ve successfully displayed your new component on the page.

Run the app:

ng serve

Then visit:
http://localhost:4200

You should see your message on the screen.

Step 5: (Optional) Pass Data to the Component

You can make components reusable by passing inputs.

Parent Component (app.component.html):

<app-hello [name]="'John Doe'"></app-hello>Code language: HTML, XML (xml)

Child Component (hello.ts):

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h2>Hello, {{ name }}</h2>`,
})
export class HelloComponent {
  @Input() name: string = '';
}Code language: JavaScript (javascript)

Now your component can dynamically receive data!

Best Practices

Use meaningful names for components (user-profile, nav-bar, login-form).
Keep components small and focused — one purpose per component.
Reuse components instead of repeating code.
Use @Input() and @Output() for communication between components.
Follow Angular’s naming conventions for clarity and consistency.

Conclusion

Creating a component in Angular is simple — and mastering this concept unlocks the true power of Angular. Components help you organize, reuse, and scale your code effortlessly.

So next time you want to add a feature or UI section — you’ll know exactly how to build it as a clean, reusable component.