Chapter 1: Introduction & First Component
Introduction & First Component very slowly, very human-style — like a patient teacher who really wants you to feel comfortable with Angular right from the start.
No rushing, lots of small examples, explanations why things are done this way in 2026 (Angular v21 era), and we’ll build everything step by step.
1. What actually is Angular? (2026 honest explanation)
Imagine you’re building a house.
- Plain HTML + CSS + JavaScript = you build everything brick by brick, manually. Fine for small shed, painful for a 10-floor building.
- React / Vue = you get good Lego blocks, but you still decide almost everything yourself (routing? forms? state? testing? — you pick libraries).
- Angular = full ready-made construction company. They give you:
- Pre-designed strong Lego blocks (components)
- Automatic delivery system for data to screen (binding + signals)
- Built-in routing, forms, HTTP client, animations, testing tools, CLI for scaffolding
- Strong typing with TypeScript (catches mistakes early)
- Opinionated structure → your 10-person team writes code that looks similar
In January 2026 → Angular v21 is current stable version (released late 2025). It focuses heavily on:
- Signals → new super-easy reactivity (much simpler than old RxJS for 80% of cases)
- Standalone components → no more NgModule boilerplate for most apps
- @if @for @switch → cleaner template control flow (no more *ngIf hacks)
- AI-friendly → better editor integrations & prompt patterns for GitHub Copilot / Cursor etc.
Angular today is fast, modern, great for medium-to-large apps (dashboards, admin panels, e-commerce backoffices, SaaS tools), excellent editor support, long-term support.
Okay — enough theory. Let’s create something right now.
2. Creating your very first standalone component (hands-on)
Step 0: Make sure you have tools (5 minutes)
You need:
- Node.js 20+ or 22+ or 24+ (v21 works great with any of these)
- npm (comes with Node)
Open terminal / command prompt:
|
0 1 2 3 4 5 6 7 |
node -v # should show 20.x or higher npm -v |
Install Angular CLI globally (only once):
|
0 1 2 3 4 5 6 |
npm install -g @angular/cli |
Now create fresh project (Angular v21 style — standalone by default):
|
0 1 2 3 4 5 6 7 8 9 |
ng new first-angular-app --standalone --routing=false --style=css # Say Yes to SSR if asked → but for learning basics → No is fine too cd first-angular-app ng serve |
→ Browser opens http://localhost:4200 You should see default welcome screen.
This project already contains your first component — the root one.
Step 1: Open & understand app.component.ts (your first component)
Location: src/app/app.component.ts
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', // ← This is HTML tag <app-root></app-root> standalone: true, // ← Modern 2025+ style — no NgModule needed imports: [], // ← Later we'll import other components/pipes here templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'first-angular-app'; // ← This is your data variable } |
Three main parts of almost every component:
- @Component decorator → metadata (name, template, styles…)
- class → your logic + data (like Java class or TS class)
- template (HTML file) → what user actually sees
Step 2: Change something simple — interpolation magic
Open src/app/app.component.html Delete most of it and write only this:
|
0 1 2 3 4 5 6 7 8 9 10 |
<h1>Hello from Webliance in Airoli!</h1> <p>Welcome to my first Angular app → {{ title }}</p> <p>Today's date magic: {{ today | date:'fullDate' }}</p> |
Now go to app.component.ts and add:
|
0 1 2 3 4 5 6 7 8 9 10 |
export class AppComponent { title = 'Webliance Angular Adventure'; today = new Date(); // ← current date & time } |
Save both files → browser auto-updates → you see:
Hello from Webliance in Airoli! Welcome to my first Angular app → Webliance Angular Adventure Today’s date magic: Tuesday, January 27, 2026 (or whatever today is)
→ {{ title }} = interpolation. Angular takes value from component class → puts it into HTML live.
→ | date:’fullDate’ = pipe (built-in formatter)
3. Templates, interpolation {{ }}, and basic data binding (deeper examples)
A. Interpolation {{ }} — showing values
Anything inside {{ … }} is TypeScript expression evaluated and shown as text.
More examples — replace content of .html file:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- Simple variables --> <h2>My name: {{ myName }}</h2> <p>Age next year: {{ age + 1 }}</p> <!-- Object properties --> <p>City: {{ address.city }}, PIN: {{ address.pin }}</p> <!-- Calculations & conditions --> <p>Salary after 10% hike: {{ salary * 1.10 | number:'1.0-0' }} ₹</p> <p>You are {{ age >= 25 ? 'experienced' : 'young & energetic' }} developer</p> |
Matching .ts:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
export class AppComponent { myName = 'Webliance'; age = 28; salary = 120000; address = { city: 'Airoli', pin: 400708 }; } |
→ Everything updates live when you change values.
B. Property binding [ ] — controlling attributes
Interpolation only works for text content. For attributes (src, href, class, style, disabled…) use square brackets [ ]
Example — let’s add image & button:
Add to .ts:
|
0 1 2 3 4 5 6 7 8 |
photo = 'https://images.unsplash.com/photo-1516321310764-9f3c9619d7d7?w=800'; isButtonDisabled = true; bgColor = '#e3f2fd'; |
Add to .html:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- Property binding examples --> <img [src]="photo" alt="Nice view of Navi Mumbai sky" width="400"> <button [disabled]="isButtonDisabled" [style.backgroundColor]="bgColor"> Click me (I'm disabled now) </button> <div [class.special-box]="true"> This div has special-box class always </div> |
CSS in app.component.css (just for fun):
|
0 1 2 3 4 5 6 7 8 9 10 |
.special-box { padding: 20px; border: 2px solid #42a5f5; border-radius: 8px; } |
→ [src]=”photo” → Angular sets src attribute to value of photo → [disabled]=”isButtonDisabled” → button disabled when true → You can bind almost any property this way
C. Quick recap table (very beginner friendly)
| What do you want? | Syntax you write | Meaning / when to use |
|---|---|---|
| Show text from variable | {{ variable }} | Inside tag content (p, span, h1…) |
| Set attribute (src, href…) | [src]=”imageUrl” | Images, links, ids, custom attrs |
| Toggle class | [class.active]=”isActive” | Add/remove CSS class conditionally |
| Set inline style | [style.color]=”‘red'” | Change color, font-size, etc. directly |
| Disable/enable element | [disabled]=”!formValid” | Buttons, inputs during loading/validation |
Tiny practice challenge for today (5–10 min)
- Add these properties to your AppComponent class:
|
0 1 2 3 4 5 6 7 8 |
mood = 'learning & excited'; weather = 'sunny in Airoli'; temperature = 28; |
- Show them in HTML with interpolation + some calculation:
|
0 1 2 3 4 5 6 7 |
<p>Current mood: {{ mood.toUpperCase() }}</p> <p>Weather today: {{ weather }} ({{ temperature }}°C → feels like {{ temperature + 3 }}°C)</p> |
- Bonus: Add a button that changes mood
|
0 1 2 3 4 5 6 |
<button (click)="changeMood()">Change my mood!</button> |
And in .ts:
|
0 1 2 3 4 5 6 7 8 9 10 |
changeMood() { this.mood = this.mood.includes('excited') ? 'now super pumped 🚀' : 'learning & excited'; } |
(Notice (click) → that’s event binding — we’ll go deeper next time)
Save → play → see live changes.
You did it! You now understand:
- What Angular is for
- Standalone component structure
- Interpolation {{ }} for text
- Property binding [ ] for attributes
Next time (if you want) → inputs (passing data to child components), @if / @for control flow, and little more fun events.
How did this feel? Any part confusing? Want to fix something / add picture example / go slower on one topic? Just tell me — I’m right here 😊
