Angular 18 Client-Side App – Navigation, API, Reactive Forms

Author: Aanand Saini
Course: Web Frameworks
Tech: Angular 18 (standalone components)

---

Overview

This project is a client-side Angular 18 web application that demonstrates:

• Client-side routing with Angular Router
• Navigation bar with multiple pages
• API consumption using an Angular service and HttpClient
• Reactive forms with validation
• Deployment to a public hosting platform

The app is built using the standalone component pattern introduced in modern Angular versions (no NgModules).

---

Features

• Home Page (/)

  • Simple landing page with introductory text about the application.
  • Links to the API Data page and the Form page.

• API Data Page (/api-data)

  • Uses an Angular service to call a public REST API with HttpClient.
  • Displays a list of items (e.g., posts) with a loading state and basic error handling.

• Form Page (/form)

  • Implements a reactive form using FormBuilder and FormGroup.
  • At least three fields (e.g., name, email, subject, message).
  • Validation:
    • Required fields
    • Valid email format
    • Minimum length checks
  • Shows validation error messages and a success message after a valid submission.

---

Tech Stack

• Angular 18 (standalone components)
• Angular Router
• Angular HttpClient
• Angular Reactive Forms
• TypeScript
• Deployed on: [GitHub Pages / Netlify / Vercel – update this line]

---

Project Structure (src/app)

• app.ts – Root standalone component (AppComponent)
• app.html – Root template with navbar and <router-outlet>
• app.css – Global container styling
• app.routes.ts – Route configuration for Home, API Data, and Form pages
• components/navbar/ – Navbar component with router links
• pages/home/ – Home page component
• pages/api-data/ – API Data page component
• pages/form-page/ – Form page component (reactive form)
• services/api.ts – Angular service for API calls using HttpClient

---

Getting Started

Prerequisites

• Node.js (18+ recommended)
• Angular CLI installed globally:

npm install -g @angular/cli

Installation

git clone https://github.com/aanand816/angular-assignment.git
cd angular-assignment
npm install

Run in Development

ng serve

Then open:

http://localhost:4200

---

Build for Production

ng build

The production build will be generated in the dist/ folder.

---

Deployment

This app can be deployed to:

• GitHub Pages
• Netlify
• Vercel

Example (GitHub Pages):

1. Build with correct base href (replace angular-assignment with your repo name if different):

   ng build --base-href "/angular-assignment/"

2. Deploy the dist output using your chosen method (e.g. angular-cli-ghpages, Netlify drag-and-drop, or Vercel import).

3. Update this README with your live URL, for example:

   Live Demo: https://angular-assignment-lilac.vercel.app/

---

API Used

• Public API: JSONPlaceholder – free fake REST API for testing
  Docs: https://jsonplaceholder.typicode.com

The ApiService (src/app/services/api.ts) calls the /posts endpoint and the API Data page displays a subset of the results.

---

Assignment Requirements Checklist

• New Angular 18 project created with Angular CLI
• Client-side routing configured
• Navbar with links to Home, API Data, and Form pages
• Public API consumed via Angular service + HttpClient
• Reactive form with at least three fields
• Validation and error messages implemented
• Application built with Angular CLI
• Application deployed to a public hosting platform
• Code pushed to GitHub with this README.md

---

Notes

• The project uses Angular’s standalone components instead of NgModules, which is the current recommended approach in Angular 18+.
• Styling and form fields can be customized further to match assignment expectations and personal preferences.