Angular Get Started

Here is a simple and practical “Angular Get Started” guide—perfect for beginners who want to start coding quickly 👇

🚀 Angular – Get Started (Step-by-Step)

1️⃣ Install Node.js

Angular requires Node.js.
Download & install from: https://nodejs.org

After installation, check the version:

node -v
npm -v

2️⃣ Install Angular CLI

Angular CLI helps you create and manage Angular projects easily.

Run:

npm install -g @angular/cli

Check installation:

ng version

3️⃣ Create Your First Angular Project

Use Angular CLI:

ng new my-app

CLI will ask:

  • Add routing? (y/n)

  • CSS styling? (choose CSS / SCSS etc.)

Enter:

Yes
CSS

4️⃣ Run the Application

Go into your project folder:

cd my-app
ng serve

Open your browser → http://localhost:4200

You will see the default Angular welcome page 🎉

🧱 Understanding the Basic Structure

Inside src/app you will see:

app/
├── app.component.ts (component logic)
├── app.component.html (component UI)
├── app.component.css (component styles)
└── app.module.ts (main module)

🧩 Create a New Component

Example: create a home component.

Run:

ng generate component home

OR shorter:

ng g c home

Angular will create:

home/
├── home.component.ts
├── home.component.html
├── home.component.css
└── home.component.spec.ts

Then use the component in HTML:

<app-home></app-home>

🔗 Working with APIs (Simple Example)

Add HttpClient Module in app.module.ts:


 

Use it in a service:


 

🔄 Two-Way Binding Example

app.component.html:

Enable FormsModule:

⭐ Routing Setup

When creating project, if you chose “Yes” for routing, you will see app-routing.module.ts.

Example route:

Use in nav:

🎯 You Are Now Ready With Angular!

You have learned:

  • Install Angular CLI

  • Create a project

  • Run the app

  • Create components

  • Setup routing

  • Use data binding & API calls

You may also like...