Chapter 1.4☕ 18 min read

First Component — Hello Hyderabad

Components are the building blocks of Angular. Let's build your first one.

01What is a Component

A component is the basic building block of an Angular application. Think of it as a self-contained unit that controls a part of the screen.

Every component has three parts:

TypeScript class — The logic and data (the brain)
HTML template — What the user sees (the face)
CSS styles — How it looks (the clothes)

Hyderabad analogy: Ek component = ek biryani plate. Plate (HTML) mein biryani (data) hoti hai, uspe naam likha hota hai CSS style. Sab kuch ek saath — complete package!

Angular uses the @Component decorator to tell Angular, "Hey, this class is a component!" The decorator provides metadata — like which HTML template to use, which CSS styles to apply, and how to reference this component in other templates.

02@Component Decorator — Line by Line

Let's break down the @Component decorator line by line:

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

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrl: './hello.component.scss',
  standalone: true,
  imports: [CommonModule]
})
export class HelloComponent {}

selector: 'app-hello' — This is the custom HTML tag you'll use in templates. Write <app-hello></app-hello> wherever you want this component to appear. The prefix app- is the standard convention.
templateUrl: './hello.component.html' — Path to the HTML template file. This is what the user sees.
styleUrl: './hello.component.scss' — Path to the styles file (or styles: [] for inline). Note: styleUrl (singular, new) vs styleUrls (plural, old).
standalone: true — This component doesn't need an NgModule. It can import things directly. Always use this in Angular 17+.
imports: [CommonModule] — What other modules/directives this component needs. CommonModule gives you @if, @for, ngClass, etc.

Hyderabad Tip: Selector ko ek custom HTML tag samjho. Jaise <div> ek built-in tag hai, waise <app-hello> tumhara apna custom tag!

03The TypeScript File (hello.component.ts)

The TypeScript file (hello.component.ts) contains the class that powers your component. Let's understand it:

export class HelloComponent {
  // Properties — data for the template
  name: string = 'Hyderabad';
  biryaniItems: number = 5;
  isHungry: boolean = true;

  // Methods — functions the template can call
  sayHello(): string {
    return 'Hello from Hyderabad!';
  }

  orderBiryani(): void {
    console.log('Biryani ordered! 🍲');
  }
}

Properties are variables that the template can display. Whatever you define in the class is available in the template.

Methods are functions the template can call. For example, a button click can call orderBiryani().

Hyderabad Analogy: Class ke andar property = template ka data, method = template ka kaam. Jaise ek waiter ke paas menu (data) hota hai aur order lene ka tareeqa (method) hota hai.

04The Template File (hello.component.html)

The template file (hello.component.html) is what the user sees. It uses regular HTML plus Angular-specific syntax:

<div class="hello-card">
  <h1>Hello, {{ name }}! 🍲</h1>
  <p>I have {{ biryaniItems }} biryani items today</p>
  <button (click)="orderBiryani()">Order Biryani</button>
  @if (isHungry) {
    <p>Let's eat!</p>
  }
</div>

{{ name }} — Interpolation. Displays the value of the name property from the class.
(click)="orderBiryani()" — Event binding. Runs the orderBiryani() method when clicked.
@if (isHungry) — Structural directive. Conditionally shows content.

Hyderabad Tip: Template = component ka face — yahan dikhata hai sab kuch. Jo class mein likha, wahi template mein dikhega!

05Using Your Component

Creating a component is one thing — using it in your app is another. Here's how:

Step 1: Create the component (using CLI or manually)

ng g c components/hello --standalone --skip-tests

Step 2: To use HelloComponent in AppComponent, import it in AppComponent's imports array:

// app.component.ts
import { Component } from '@angular/core';
import { HelloComponent } from './components/hello/hello.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HelloComponent],  // ← Import here!
  templateUrl: './app.component.html'
})
export class AppComponent {}

Step 3: Use the component in AppComponent's template:

<!-- app.component.html -->
<h1>Welcome to Angular Hyderabad!</h1>
<app-hello></app-hello>  <!-- ← Use here! -->

Hyderabad Analogy: Component ko use karna = biryani plate table pe rakhna. Pehle plate (component) banao, phir usko table (parent template) pe rakh do!

Key Takeaways

✅ A component = TypeScript class + HTML template + CSS styles
✅ @Component decorator provides metadata (selector, template, styles, standalone)
✅ Properties = data for template; Methods = functions for template
✅ standalone: true means no NgModule needed — modern Angular pattern
✅ Import a component in the parent's imports array, then use its selector in the template

Previous1.3 — Project Structure Explained 📋 All Chapters Next Chapter1.5 — Angular CLI Commands →