1. What is Angular? (in simple words)
Angular is a complete toolkit (framework) made by Google for building modern web applications — especially the kind that feel smooth and app-like in the browser (think Gmail, YouTube Music web version, Google Workspace apps, or most complex dashboards you see in companies).
Main things Angular gives you:
- It lets you build your UI as small reusable pieces called components (like Lego blocks)
- It automatically syncs what the user sees on screen with your data in code (this magic is called data binding)
- It handles a lot of boring stuff for you: routing (pages/navigation), forms, talking to backend APIs, animations, testing setup, etc.
- It uses TypeScript by default → which means better autocompletion, fewer typos, and code that scales when your app grows to 50–100+ components
- Modern Angular (v17–21+) is very fast, supports server-side rendering (good for SEO), mobile-like experiences (PWA), and now uses a new reactive system called signals that is much easier than old RxJS-heavy code
In short: If you want to build something more serious than a landing page — like a CRM, e-commerce admin panel, SaaS dashboard, or internal company tool — Angular is one of the best choices because it gives structure, consistency, and long-term maintainability.
2. Creating your first standalone component
In 2025–2026 Angular (v19+), almost everything is standalone by default. No more NgModules for most new projects — huge win for beginners!
Let’s create the classic first component: something that says “Hello”.
Step 1: Create a new project (if you haven’t already)
|
0 1 2 3 4 5 6 7 8 9 |
npm install -g @angular/cli # only once ever ng new hello-angular --standalone --routing false --style=css cd hello-angular ng serve |
Open http://localhost:4200 → you already have your first app running!
Step 2: Look at the root component (src/app/app.component.ts)
This file is already your first component:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// src/app/app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', // → this is the custom HTML tag standalone: true, // → modern default in v19+ imports: [RouterOutlet], // → what other pieces this component can use templateUrl: './app.component.html', // → where the HTML lives styleUrl: './app.component.css' // → where CSS lives }) export class AppComponent { title = 'hello-angular'; // ← this is your data } |
And the matching HTML file:
|
0 1 2 3 4 5 6 7 8 9 |
<!-- src/app/app.component.html --> <h1> Welcome to {{title}}! </h1> |
→ Open http://localhost:4200 → you see “Welcome to hello-angular!”
This is already interpolation working.
3. Templates, interpolation {{ }}, and basic data binding
a) Interpolation {{ expression }}
The {{ }} is the simplest way to show data.
Change the component class:
|
0 1 2 3 4 5 6 7 8 9 10 |
export class AppComponent { title = 'My First Angular App'; currentYear = 2026; user = { name: 'Webliance', city: 'Airoli' }; } |
And update the HTML:
|
0 1 2 3 4 5 6 7 8 9 10 |
<h1>Welcome to {{ title }}!</h1> <p>It's currently year {{ currentYear }}</p> <p>Hello {{ user.name }} from {{ user.city }} 👋</p> |
→ Save → browser auto-reloads → magic! The values appear.
{{ }} can contain almost any valid TypeScript expression (math, ternary, function calls, etc.):
|
0 1 2 3 4 5 6 7 |
<p>Next year will be {{ currentYear + 1 }}</p> <p>You are from {{ user.city === 'Airoli' ? 'Navi Mumbai' : 'somewhere else' }}</p> |
b) One-way data binding: Property binding [property]=”value”
Interpolation is great for text content, but for attributes (src, href, class, style, disabled, etc.) we use [ ]
Example — let’s show a profile picture:
Add to class:
|
0 1 2 3 4 5 6 7 |
photoUrl = 'https://images.unsplash.com/photo-1552058544-f2b08422138a?w=300'; isVisible = true; |
Update HTML:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Property binding examples --> <img [src]="photoUrl" alt="Profile photo"> <button [disabled]="!isVisible">Click me (disabled when false)</button> <div [style.backgroundColor]="'#e0f7fa'" [hidden]="!isVisible"> This box is conditionally visible </div> |
Common ones you’ll use every day:
- [src], [alt], [href]
- [class.active]=”someCondition”
- [style.color]=”‘red'”
- [disabled]=”formIsInvalid”
Quick comparison table (beginner view)
| Feature | Syntax | Used for | Example |
|---|---|---|---|
| Interpolation | {{ expression }} | Text content inside tags | {{ user.name }} |
| Property binding | [property]=”value” | Element attributes / properties | [src]=”imageUrl” |
| Event binding | (event)=”method()” | Reacting to clicks, input, etc. | (click)=”sayHello()” |
| Two-way binding | [(ngModel)]=”property” | Forms (input ↔ variable sync) | [(ngModel)]=”username” |
(We’ll cover events and two-way in next chapters)
Small practice task right now
- Change title to something fun like “Webliance’s Angular Journey”
- Add a property mood = ‘excited’;
- Show it in HTML: <p>I’m feeling {{ mood }} about learning Angular! 🚀</p>
- Add a button: <button (click)=”changeMood()”>Change mood</button>
- And in class:
|
0 1 2 3 4 5 6 7 8 |
changeMood() { this.mood = this.mood === 'excited' ? 'super pumped' : 'excited'; } |
(If you get stuck — just ask, I’ll help debug)
That’s it for the very first chapter! You now understand:
- What Angular is
- What a standalone component looks like
- How to show data with {{ }}
- How to bind attributes with [ ]
Next chapter usually goes deeper into components + inputs (passing data from parent to child) and modern @if / @for control flow.
Ready to continue to chapter 2, or want to play more with this first component / fix something? 😄
