DEV Community

Cover image for Your First Angular 20 Project: Step‑by‑Step for Absolute Beginners
Preethi R
Preethi R

Posted on

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

#angular #beginners #basic #programming

🌱 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

console.log("Hello from Node!");
Enter fullscreen mode Exit fullscreen mode

Hit Enter, and you’ll see:

Hello from Node!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • To list files in the folder: 
ls
Enter fullscreen mode Exit fullscreen mode
  • To change folders: 
cd my-folder
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then check the installation:

ng version
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Start the development server:

ng serve
Enter fullscreen mode Exit fullscreen mode

Open your browser and go to:

http://localhost:4200
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

This creates:

welcome/ welcome.component.ts welcome.component.html welcome.component.css
Enter fullscreen mode Exit fullscreen mode

Use this component by adding:

<app-welcome></app-welcome>
Enter fullscreen mode Exit fullscreen mode

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! 💻✨

Top comments (1)

Collapse
 
franciscossjunior profile image
Francisco S S Junior •

@preethi_r_eecc1107f906ec6 Thank you so much for taking the time to share this excellent article. It's definitely a great starting point for beginners.