📦 Components and Modules in Angular – A Practical Quick Start

Angular applications are built using two core building blocks: Components and Modules. Understanding how these pieces fit together is essential for creating scalable and maintainable apps.

🔹 What is a Component?

A Component is a TypeScript class decorated with @Component that tells Angular how to create and render the associated HTML.

Each Angular app must have at least one component – the root component.

📦 A Component Has:

• A TypeScript class (logic)
• An HTML template (view)
• An optional CSS file (styles)
• A selector (custom tag to insert it elsewhere)

✅ Example: A Simple UserCardComponent

user-card.component.ts

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

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.css']
})
export class UserCardComponent {
  name = 'John Doe';
  email = 'john@example.com';
}

user-card.component.html

<div class="card">
  <h3>{{ name }}</h3>
  <p>{{ email }}</p>
</div>

🔹 What is a Module?

An Angular Module is a container that groups related components, directives, pipes, and services. The root module is usually called AppModule.

You can create feature modules to split your app into functional sections (e.g., UserModule, AdminModule).

✅ Example: AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UserCardComponent } from './user-card/user-card.component';

@NgModule({
  declarations: [
    AppComponent,
    UserCardComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

🧩 How They Work Together

• Components are declared in a module’s declarations array.
• The root module (AppModule) bootstraps the root component.
• Use feature modules for large apps and load them lazily when needed.

💡 Best Practices

• One component per file
• Use feature modules for scalability (e.g., AdminModule, UserModule)
• Always declare components in the module they belong to

🔄 Component Hierarchy Example

app.component.html

<h1>Welcome to Our App!</h1>
<app-user-card></app-user-card>

This embeds the UserCardComponent using its selector <app-user-card>.

📁 Recommended Folder Structure

src/
├── app/
│   ├── app.module.ts
│   ├── app.component.ts
│   └── user-card/
│       ├── user-card.component.ts
│       ├── user-card.component.html
│       └── user-card.component.css

🧠 Summary

Term	Purpose
Component	Defines UI and behavior
Module	Organizes and bootstraps components
AppModule	Root module of the Angular application