Getting Started With Angular — Components, Modules, and Templates (Beginner-Friendly Guide)

🔹 Introduction

If you’re learning Angular for the first time, the most important concepts you must understand are:

• Modules

• Components

• Templates

These three form the foundation of every Angular application.

In this article, we’ll break them down using a real-world example and help you build a working Angular app step-by-step.

🔹 Real-World Scenario: Building a Task Manager App

Imagine you're creating a simple web app called TaskTracker where users can:

✔️ View a list of tasks
✔️ Add new tasks
✔️ Mark tasks as completed

We’ll use this scenario to understand Angular building blocks.

🧱 1. Angular Modules (NgModule)

A Module is a container that groups functionality together.

👉 Every Angular app has at least one module:

📌 app.module.ts

Example

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

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

What does each part mean?

Property	Meaning
declarations	All components, pipes, directives used in this module
imports	Other modules you want to use
bootstrap	The component that starts the app

⚛️ 2. Angular Components

A component controls a section of the UI.

A component consists of 3 main files:

File	Purpose
.ts	Logic (TypeScript code)
.html	UI/Template
.css	Styles

Create a new component:

ng generate component task-list

OR

ng g c task-list

Example: task-list.component.ts

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

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
  tasks = [
    { title: "Learn Angular", completed: false },
    { title: "Build a project", completed: false },
    { title: "Deploy app", completed: false }
  ];
}

🖼️ 3. Angular Templates

The component template defines how data appears to the user.

Example: task-list.component.html

<h2>Task List</h2>

<ul>
  <li *ngFor="let task of tasks">
    {{ task.title }} - <strong>{{ task.completed ? 'Done' : 'Pending' }}</strong>
  </li>
</ul>

Here we used:

• *ngFor 👉 Loop through tasks

• {{ }} 👉 Display data by interpolation

📌 Using the Component in App UI

Since we used:

selector: 'app-task-list'

We can display it in app.component.html:

<h1>Task Tracker Application</h1>
<app-task-list></app-task-list>

🧩 Final Output (What You’ll See)

Task Tracker Application

Task List
- Learn Angular     Pending- Build a project   Pending- Deploy app        Pending