Part 1: Building Your First Angular 20 Application

Web development has exploded in the last decade. Frameworks like Angular lead the charge, emphasizing performance, developer ergonomics, and modern web standards. Angular 20, released in May 2025, takes this further with stabilized signals, zoneless change detection (in developer preview), and a streamlined naming convention that drops those pesky suffixes like 
.component.ts by default.
In this guide, we'll set up your first Angular 20 app using the Angular CLI. Expect cleaner file names, faster reactivity, and less boilerplate. We'll keep it practical, step-by-step, and inspired by Flavio Copes — code-first, no fluff.
Requirements
Ensure your setup includes these essentials for a smooth Angular 20 workflow:
Tool
Why You Need It
Install / Check
Node.js (LTS, e.g., 20.x or later)
Powers the CLI and runs TypeScript
https://nodejs.org 
 
node -v
npm
Manages packages (bundled with Node)
npm -v
Git (optional)
Version control for your projects
https://git-scm.com 
 
git --version
Pro Tip: Switch versions easily with 
nvm:
nvm install --lts
nvm use --lts
Angular 20 supports modern evergreen browsers — check details at angular.dev/reference/versions#browser-support.
Install the Angular CLI
The Angular CLI is your go-to tool for scaffolding, testing, and deploying. It now aligns with Angular 20's new style guide, generating suffix-free files by default (e.g., 
app.ts instead of 
app.component.ts).
Install globally:
npm install -g @angular/cli@20
Windows? Run as Administrator.
macOS/Linux? Add 
sudo if prompted:
sudo npm install -g @angular/cli@20
Verify:
ng version
Output should show Angular CLI 20.x.x and related tools.
Create Your First Angular 20 App
Generate a new project named 
my-blog-app:
ng new my-blog-app
Prompts you'll see:
? Would you like to share pseudonymous usage data...? (y/N) → N
? Which stylesheet format would you like to use? → CSS
? Do you want to enable Server-Side Rendering (SSR)...? (y/N) → N
Hit Enter for defaults (SSR is optional; we'll skip for simplicity).
The CLI will:
Create 
my-blog-app/ folder
Install dependencies (including Angular 20 core)
Apply the new naming: No 
.component suffixes!
This takes 1–3 minutes. Pro tip: Angular 20's CLI is faster thanks to optimized builds.
Legacy Mode? If you prefer old-school suffixes, add 
--strict=false or configure in 
angular.json later.
Run the App
Enter the project:
cd my-blog-app
Launch the dev server:
ng serve
Alias: 
ng dev for quick starts.
After building (faster in v20!), open:
http://localhost:4200
Boom — the Angular welcome page loads! Live reload is on: Edit code, save, and watch updates instantly.
Project Structure (Updated for Angular 20)
Angular 20 keeps things lean. Key folders/files:
my-blog-app/
├── src/                  ← Your source code hub
│   ├── app/
│   │   ├── app.ts        ← Main component (no .component.ts!)
│   │   ├── app.html      ← Template (no .component.html)
│   │   ├── app.css       ← Styles (no .component.css)
│   │   ├── app.config.ts ← App providers
│   │   └── app.routes.ts ← Routing config
│   ├── index.html        ← Entry HTML
│   ├── main.ts           ← Bootstrap
│   └── styles.css        ← Global CSS
├── angular.json          ← Workspace config
├── package.json          ← Dependencies
└── tsconfig.json         ← TypeScript setup
Focus on 
src/app/ — that's your playground. New naming reduces clutter: 
app.ts handles logic, 
app.html the markup.
Make Your First Change
Tweak the welcome message to feel the reactivity.
1. Edit the Main Component
Open 
src/app/app.ts:
export class AppComponent {
  title = 'My Awesome Blog';  // Updated title
}
2. Update the Template
Open 
src/app/app.html and find (around line 20):
<h1>Hello, {{ title }}</h1>
Change to:
<h1>Welcome to {{ title }}! 🚀</h1>
Save. Browser auto-refreshes — see "Welcome to My Awesome Blog! 🚀"?
This uses interpolation (
{{ }}) for data binding. Angular 20's signals make this even snappier under the hood.
How It Works (Quick Peek Under the Hood)
index.html has 
<app-root></app-root> — Angular's mount point.
main.ts bootstraps:
bootstrapApplication(AppComponent, appConfig);
app.ts (root component) renders into the DOM.
Signals (stable in v20) handle reactivity efficiently — no more full tree diffs by default.
Useful Angular CLI Commands
Command
Alias
What It Does
ng new <name>
n
Scaffold a new app
ng serve
dev
Dev server with HMR
ng build
b
Production build
ng generate component <name>
g c
New component (suffix-free!)
ng test
t
Run tests
ng update
-
Upgrade to latest
Docs: angular.dev/cli
Generate with legacy suffixes: 
ng g c my-comp --suffix=component.
Recommended Tools
1. VS Code + Extensions
Angular Language Service — Auto-complete in templates.
Material Icon Theme — Spot Angular files easily.
2. Angular DevTools (Chrome/Firefox)
Profile components, inspect signals: angular.dev/tools/devtools. v20 adds OnPush badges!
3. Communities
Tech Stack Nation — Beginner-friendly study group.
Angular Discord — Official hub.
What’s Next?
Your app's running — level up:
ng g c blog-post  # Creates blog-post.ts/html/css (no suffixes)
Add to 
app.html:
<app-blog-post></app-blog-post>
Explore signals for state: 
signal('Hello'). Dive into routing or SSR next.
Angular 20's zoneless preview? Opt-in for blazing-fast apps.
Final Words
You've built an Angular 20 app: Cleaner names, stable signals, and CLI magic. It's not just a framework — it's a full ecosystem for scalable web apps.
Build iteratively. Experiment. The future's reactive.
Inspired by Flavio Copes — practical, dev-focused.
Based on Angular 20 docs and Learning Angular.