🧱 Understanding Angular Components in Angular 20 — The Building Blocks of Every App

Welcome back to The Debug Diaries! 👋
In the last post, we created our first Angular 20 app using the CLI.

Now, let’s dive into the most important concept in Angular: Components.
In Angular 20, components are simpler — file names like example.ts, example.html, etc., make them easier to read and manage.

---

🔍 What is a Component?

In Angular, a component is like a mini building block for your app. Each piece of the screen (header, card, form, etc.) can be its own component.

It contains:

• 🧠 Logic → TypeScript

• 🖼️ Template → HTML

• 🎨 Styling → CSS

---

🗂️ A Simple Component Structure (Angular 20 Style)

When you create a component like this:

ng generate component welcome

Angular 20 creates these 4 files:

src/app/welcome/
├── welcome.ts         ← logic file (was .component.ts earlier)
├── welcome.html       ← template file
├── welcome.css        ← styles for this component
└── welcome.spec.ts    ← test file (you can ignore this for now)

No more welcome.component.ts — just clean, simple filenames.

---

✨ Let’s See an Example

🧠 welcome.ts

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrls: ['./welcome.css']
})
export class Welcome {
  username = 'Tushar';
}

🖼️ welcome.html

<h2>Welcome to Angular 20, {{ username }}!</h2>

🎨 welcome.css

h2 {
  color: #1976d2;
  font-weight: 600;
  font-family: 'Segoe UI', sans-serif;
}

---

💡 How Does Angular Know About Your Component?

When you generate a component, Angular automatically registers it in app.module.ts:

import { Welcome } from './welcome/welcome';

@NgModule({
  declarations: [
    AppComponent,
    Welcome
  ],
})
export class AppModule { }

Once it's declared, you can use <app-welcome></app-welcome> in your app’s template to show it.

---

🛠️ Want to Create Another Component?

Use this command:

ng generate component contact

It will generate:

• contact.ts

• contact.html

• contact.css

• contact.spec.ts

Quick and clean!

---

✅ Recap

• Angular 20 uses simplified component filenames (.ts, .html, .css)

• Each component contains logic, layout, and styling

• Components are the building blocks of your Angular apps

---

📌 What’s Next?

In the next blog on The Debug Diaries, we’ll cover:

🔗 Data Binding in Angular 20
You’ll learn how to connect your data to the UI using:

• Interpolation ({{ }})

• Property Binding ([ ])

• Event Binding (( ))

Stay tuned and keep debugging with me!

---

🔗 Let's Connect and Explore More!

📖 Read the full series: ngtushar.hashnode.dev/angular-series
💻 Source Code on GitHub: github.com/Tushar1409-hj
🔗 Connect with me on LinkedIn: linkedin.com/in/tushar1409

If you found this post helpful, don’t forget to share it with your fellow developers and follow the series for more Angular insights! 🚀