Your First Angular 20 Project: Step‑by‑Step for Absolute Beginners

[MyrinNew]

🌱 Getting Started with Angular 20 from Scratch (Beginner-Friendly Guide)

Welcome, future Angular dev! Whether you're just starting out or coming from another framework, this guide will walk you through creating your first Angular 20 app step by step.


Angular 20 (released in 2025) brings in cleaner architecture, standalone components by default, and improved dev experience — making it a great time to dive in.




🛠️ Step 0: What You Need Before Starting

Before you begin, make sure you have the following installed on your machine:

1. ✅ Node.js (v18 or later)

Node.js is a powerful tool that lets you run JavaScript code outside the browser — right on your computer. It’s like having a mini JavaScript engine that can do things like install packages, run development servers, and build your projects.


Why is Node.js important for Angular?

Angular’s tools (like the Angular CLI) rely on Node.js to run commands and manage all the packages your app needs to work. Without Node.js, you wouldn’t be able to create, build, or run your Angular apps.


How to check if Node.js is installed:

Open your command-line tool and type:






node -v







If you see a version number (like v18.16.0), Node.js is installed. If not, download and install it from nodejs.org.


Simple Node.js example:

Open your command line and type:






node







This opens the Node.js interactive shell. Now type:






console.log("Hello from Node!");







Hit Enter, and you’ll see:






Hello from Node!







This shows Node.js running JavaScript directly on your machine!





2. ✅ Bash (Command Line Interface Basics)

Bash is a type of command-line interface (CLI) or "shell" where you type commands to interact with your computer — like creating folders, running programs, and more. It’s commonly used on Linux and macOS.


On Windows, you have several options:

• PowerShell (Windows' own CLI)
• Command Prompt (cmd.exe)
• Git Bash (which gives a Bash-like experience on Windows)

Using Bash or a similar terminal helps you run commands like installing Node.js packages or starting your Angular app.


Example of Bash commands:

• To check your current folder:

pwd

• To list files in the folder:

ls

• To change folders:

cd my-folder







These are basic commands you'll use frequently when working with Angular.





3. ✅ Angular CLI (Command Line Interface)

Angular CLI is a command-line tool that helps you quickly create and manage Angular projects.


To install Angular CLI globally on your machine, run:






npm install -g @angular/cli







Then check the installation:






ng version







You should see Angular CLI version 20.x.x.





📦 Step 1: Create a New Angular Project

Generate a new Angular app by running:






ng new my-angular-app







You’ll be asked:

• Do you want to add Angular routing? (Say Yes if your app has multiple pages)
• Which stylesheet format do you want? (Choose CSS for simplicity or SCSS/SASS if you prefer)

After this, Angular CLI will set up the project files.





📁 Project Folder Structure (Simple Breakdown)

Inside my-angular-app, you'll see:






src/
app/
app.component.ts --> Main component logic
app.component.html --> Main component view
app.component.css --> Styles for the component
index.html --> HTML entry point
main.ts --> Main TypeScript entry point
angular.json --> Angular config
package.json --> List of installed packages







Angular 20 uses standalone components by default — meaning your components are more modular and easier to manage (no need for NgModule in simple cases 🎉).





🚀 Step 2: Run Your Angular App Locally

Change into your project folder:






cd my-angular-app







Start the development server:






ng serve







Open your browser and go to:

http://localhost:4200

You’ll see the Angular welcome page — your app is running live on your machine! ⚡





🧱 Step 3: Create Your First Component

Add a new Welcome component with:






ng generate component welcome --standalone







This creates:






welcome/
welcome.component.ts
welcome.component.html
welcome.component.css







Use this component by adding:














inside app.component.html.





📝 Note: Using --standalone means the component works independently without needing to be registered in a module. This is the new best practice in Angular 20.





🧠 Quick Tips for Beginners

• Angular uses TypeScript — a strongly typed JavaScript variant.
• Components consist of:
  • HTML (view)
  • CSS (styles)
  • TypeScript (logic)
• Use Angular CLI commands like ng generate, ng serve, and ng build.
• Everything in Angular is component-based.
• For apps with multiple pages, explore Angular Router.

🔧 What’s New in Angular 20?

✅ Standalone components by default (less boilerplate)

⚡ Faster build performance

♿ Better accessibility and default styling

🔧 Improved tooling with strict typing & default configs

🧪 Simplified testing setup





📚 What’s Next?

Once you’re comfortable:

• Learn Routing
• Explore Reactive Forms
• Try API integration with HttpClient
• Use services and dependency injection

🙌 Final Words

Congrats on starting your Angular journey! Angular 20 makes it easier and cleaner than ever.


Let me know in the comments if you'd like follow-up guides on:

✅ Routing

✅ API calls

✅ Folder structure best practices

✅ Deploying your Angular app for free


Happy coding! 💻✨




More...