Angular — Frontend Framework by Google

Angular is the full-stack frontend framework used in TCS ILP PRA and Sprint 4. It is a component-based framework written in TypeScript that builds Single Page Applications (SPAs). You will build a complete Angular frontend that connects to your Spring Boot backend.

1. What is Angular?

Angular is an open-source frontend framework by Google for building SPAs. An SPA loads a single HTML page and dynamically updates content without full page reloads — making apps feel fast like desktop applications.

SPA (Single Page Application) — What It Means

Traditional websites: click a link → browser loads a completely new page from the server. SPA: click a link → JavaScript replaces only the changed part of the page. No full reload. Gmail, Google Maps, Netflix — all SPAs.

Angular vs React vs Vue — Comparison

2. Angular CLI

The Angular CLI (Command Line Interface) is a tool that creates projects, generates code, runs dev servers, and builds your app. You will use it every day in Sprint 4.

Installation

# Install Angular CLI globally (needs Node.js + npm installed first)
npm install -g @angular/cli

# Check version
ng version

Essential Commands

Project Structure (What ng new Creates)

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts       ← root component (TypeScript)
│   │   ├── app.component.html     ← root template (HTML)
│   │   ├── app.component.css      ← root styles
│   │   ├── app.component.spec.ts  ← root test file
│   │   └── app.module.ts          ← root module
│   ├── assets/                    ← images, fonts, etc.
│   ├── index.html                 ← single HTML page (SPA!)
│   ├── main.ts                    ← entry point — bootstraps AppModule
│   └── styles.css                 ← global styles
├── angular.json                   ← Angular project config
├── package.json                   ← npm dependencies
├── tsconfig.json                  ← TypeScript config
└── node_modules/                  ← installed packages

3. Angular Architecture

Angular apps are built from a few core building blocks. Understanding how they connect is crucial for the exam.

The Building Blocks

How They Connect

// Flow: Module contains Components. Components use Templates.
// Components inject Services. Templates use Directives and Pipes.

     ┌──────────────┐
     │  @NgModule    │  ← organizes everything
     │  (AppModule)  │
     └──────┬───────┘
            │ declares
     ┌──────▼───────┐
     │  @Component   │  ← controls a view
     │  (AppComp)    │
     └──┬───────┬───┘
        │       │
  ┌─────▼──┐ ┌─▼──────────┐
  │Template │ │ @Injectable │  ← injected via constructor
  │ (HTML)  │ │  (Service)  │
  └────┬────┘ └─────────────┘
       │ uses
  ┌────▼──────────────┐
  │ Directives, Pipes │
  └───────────────────┘

4. Components (CORE TOPIC)

Components are the most important building block of Angular. Every piece of UI is a component — the header, sidebar, product card, login form — everything. A component = TypeScript class + HTML template + CSS styles.

Creating a Component

// Terminal: generates component files
ng generate component user-profile
// Short form:
ng g c user-profile

This creates 4 files:

src/app/user-profile/
├── user-profile.component.ts        ← component class
├── user-profile.component.html      ← template
├── user-profile.component.css       ← styles
└── user-profile.component.spec.ts   ← test

Component Anatomy (The @Component Decorator)

// user-profile.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',       // ← HTML tag name to use this component
  templateUrl: './user-profile.component.html',  // ← path to HTML
  styleUrls: ['./user-profile.component.css']    // ← path to CSS
})
export class UserProfileComponent {
  name: string = 'Darshan';      // ← data property
  age: number = 22;

  greet(): string {             // ← method
    return `Hello, ${this.name}!`;
  }
}

<!-- user-profile.component.html -->
<h2>{{ name }}</h2>             <!-- interpolation: shows "Darshan" -->
<p>Age: {{ age }}</p>
<p>{{ greet() }}</p>            <!-- can call methods too -->

<!-- Using the component in another template -->
<app-user-profile></app-user-profile>   <!-- the selector becomes a custom HTML tag -->

Component Lifecycle Hooks

Angular calls special methods (hooks) at different stages of a component's life. You don't call these — Angular calls them automatically.

Using ngOnInit (Most Important Hook)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  users: string[] = [];

  // Angular calls this automatically after component initializes
  ngOnInit(): void {
    // Fetch data, set up initial values
    this.users = ['Alice', 'Bob', 'Charlie'];
    console.log('Component initialized!');
  }
}

5. Data Binding (4 Types — VERY IMPORTANT)

Data binding is how your TypeScript component class communicates with the HTML template. Angular has 4 types. This is one of the most tested topics.

1. Interpolation — {{ expression }}

// Component (TypeScript)
export class AppComponent {
  title = 'My Angular App';
  price = 99.5;
}

<!-- Template (HTML) -->
<h1>{{ title }}</h1>                   <!-- Output: My Angular App -->
<p>Price: {{ price * 1.18 }}</p>       <!-- Can do math: 117.41 -->
<p>{{ title.length }}</p>              <!-- Can access properties: 14 -->
<p>{{ title.toUpperCase() }}</p>       <!-- Can call methods -->

2. Property Binding — [property]="expression"

// Component
export class AppComponent {
  imageUrl = 'assets/logo.png';
  isDisabled = true;
}

<!-- Template -->
<img [src]="imageUrl">                 <!-- binds src attribute -->
<button [disabled]="isDisabled">Click</button>  <!-- disables button -->

3. Event Binding — (event)="handler()"

// Component
export class AppComponent {
  counter = 0;

  increment() {
    this.counter++;
  }

  onKeyPress(event: KeyboardEvent) {
    console.log(event.key);
  }
}

<!-- Template -->
<button (click)="increment()">Count: {{ counter }}</button>
<input (keyup)="onKeyPress($event)">   <!-- $event = the DOM event object -->

4. Two-Way Binding — [(ngModel)]="property"

// IMPORTANT: You must import FormsModule first!
// In app.module.ts:
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule],  // ← add this!
  ...
})

// Component
export class AppComponent {
  username = '';
}

<!-- Template -->
<input [(ngModel)]="username">         <!-- typing updates username -->
<p>Hello, {{ username }}!</p>          <!-- shows what you type, live -->

6. Directives

Directives are instructions that tell Angular to modify the DOM. There are two main types: structural (add/remove elements) and attribute (change appearance/behavior).

Structural Directives (Modify the DOM Structure)

These start with an asterisk * — that's how you spot them. They add or remove elements from the page.

*ngIf — Show/hide based on condition

<!-- Only shows if isLoggedIn is true -->
<div *ngIf="isLoggedIn">Welcome back, user!</div>

<!-- if-else pattern -->
<div *ngIf="isLoggedIn; else loginTemplate">
  Welcome back!
</div>
<ng-template #loginTemplate>
  <p>Please log in.</p>
</ng-template>

*ngFor — Loop through a list

// Component
fruits: string[] = ['Apple', 'Banana', 'Cherry'];

<!-- Template -->
<ul>
  <li *ngFor="let fruit of fruits">{{ fruit }}</li>
</ul>
<!-- Output: Apple, Banana, Cherry as list items -->

<!-- With index -->
<li *ngFor="let fruit of fruits; let i = index">
  {{ i + 1 }}. {{ fruit }}
</li>

*ngSwitch — Multiple conditions

<div [ngSwitch]="color">
  <p *ngSwitchCase="'red'">Stop!</p>
  <p *ngSwitchCase="'green'">Go!</p>
  <p *ngSwitchCase="'yellow'">Slow down!</p>
  <p *ngSwitchDefault>Unknown color</p>
</div>

Attribute Directives (Modify Appearance/Behavior)

These change how an element looks or behaves — they don't add or remove elements.

ngClass — Add/remove CSS classes dynamically

<!-- Add 'active' class when isActive is true -->
<div [ngClass]="{'active': isActive, 'disabled': !isActive}">
  Status Box
</div>

<!-- Using a string -->
<div [ngClass]="currentClass">Styled div</div>

ngStyle — Add inline styles dynamically

<!-- Set color and font-size dynamically -->
<p [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">
  Styled text
</p>

7. Services and Dependency Injection

A service is a TypeScript class that holds business logic, data, or API calls — anything that isn't directly about the UI. Components should be thin (just UI logic); heavy work goes in services.

Creating a Service

# Terminal
ng generate service user
# Creates: user.service.ts, user.service.spec.ts

Service Code

// user.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'   // ← makes it a singleton, available everywhere
})
export class UserService {

  private users: string[] = ['Alice', 'Bob', 'Charlie'];

  getUsers(): string[] {
    return this.users;
  }

  addUser(name: string): void {
    this.users.push(name);
  }
}

Injecting a Service into a Component

// user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  users: string[] = [];

  // Service is injected via constructor — this is DI!
  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.users = this.userService.getUsers();
  }
}

8. Routing

Routing lets you navigate between different views (components) in your SPA without reloading the page. When you click a link, Angular swaps components — the URL changes, but the page doesn't reload.

Setting Up Routes

// app-routing.module.ts (or app.routes.ts)
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserComponent } from './user/user.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },               // localhost:4200/
  { path: 'about', component: AboutComponent },         // localhost:4200/about
  { path: 'users/:id', component: UserComponent },     // localhost:4200/users/5
  { path: '**', component: NotFoundComponent }          // any unmatched URL → 404
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Using Routes in Templates

<!-- app.component.html -->

<!-- Navigation links -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/users/1">User 1</a>
</nav>

<!-- This is where the routed component appears -->
<router-outlet></router-outlet>

Reading Route Parameters

// user.component.ts — reading :id from the URL
import { ActivatedRoute } from '@angular/router';

export class UserComponent implements OnInit {
  userId: string = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.userId = this.route.snapshot.params['id'];
    // For URL /users/5, this.userId = "5"
  }
}

Programmatic Navigation

import { Router } from '@angular/router';

export class LoginComponent {
  constructor(private router: Router) {}

  onLoginSuccess() {
    this.router.navigate(['/dashboard']);  // redirect after login
  }
}

9. HTTP Client

Angular's HttpClient lets you make API calls (GET, POST, PUT, DELETE) to your backend (like your Spring Boot REST API). It returns Observables, which you subscribe to.

Setup

// app.module.ts — import HttpClientModule
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule],  // ← add this
  ...
})

Making HTTP Calls in a Service

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = 'http://localhost:8080/api/users';

  constructor(private http: HttpClient) {}

  // GET — fetch all users
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  // GET — fetch one user by ID
  getUserById(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }

  // POST — create new user
  createUser(user: User): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }

  // PUT — update existing user
  updateUser(id: number, user: User): Observable<User> {
    return this.http.put<User>(`${this.apiUrl}/${id}`, user);
  }

  // DELETE — remove user
  deleteUser(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}

Using the Service in a Component

// user-list.component.ts
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    // subscribe() triggers the HTTP call and handles the response
    this.userService.getUsers().subscribe({
      next: (data) => this.users = data,
      error: (err) => console.error('Error:', err)
    });
  }
}

10. Pipes

Pipes transform data for display in templates. They don't change the actual data — just how it looks. Think of them as display formatters.

Syntax: {{ value | pipeName }}

Built-in Pipes

Chaining Pipes

<!-- Apply multiple pipes left to right -->
{{ name | uppercase | slice:0:5 }}
<!-- "darshan" → "DARSHAN" → "DARSH" -->

{{ birthday | date:'shortDate' }}
<!-- Date object → "3/22/26" -->

{{ salary | currency:'INR':'symbol':'1.0-0' }}
<!-- 50000 → "₹50,000" -->

Custom Pipe

// reverse.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

<!-- Usage: {{ 'hello' | reverse }} → "olleh" -->

11. Forms

Angular has two ways to build forms. Both work — they just differ in where the form logic lives.

Comparison

Template-Driven Form

<!-- Import FormsModule in app.module.ts first -->

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input type="text" name="username" ngModel required minlength="3">
  <input type="email" name="email" ngModel required>
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

<!-- Validation message -->
<div *ngIf="myForm.controls['username']?.errors?.['required']">
  Username is required
</div>

Reactive Form

// Component (TypeScript)
import { FormGroup, FormControl, Validators } from '@angular/forms';

export class RegisterComponent {
  registerForm = new FormGroup({
    username: new FormControl('', [
      Validators.required,
      Validators.minLength(3)
    ]),
    email: new FormControl('', [
      Validators.required,
      Validators.email
    ]),
    password: new FormControl('', [
      Validators.required,
      Validators.minLength(6)
    ])
  });

  onSubmit() {
    if (this.registerForm.valid) {
      console.log(this.registerForm.value);
      // { username: 'darshan', email: 'a@b.com', password: '123456' }
    }
  }
}

<!-- Template -->
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <input formControlName="username" placeholder="Username">
  <input formControlName="email" placeholder="Email">
  <input formControlName="password" type="password" placeholder="Password">
  <button [disabled]="registerForm.invalid">Register</button>
</form>

12. Modules (@NgModule)

Modules organize your Angular app into logical blocks. Every Angular app has at least one module — the root module (AppModule).

@NgModule Properties

@NgModule({
  declarations: [          // Components, directives, pipes that BELONG to this module
    AppComponent,
    UserListComponent,
    UserDetailComponent
  ],
  imports: [               // Other modules this module NEEDS
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [             // Services (if not using providedIn: 'root')
    UserService
  ],
  bootstrap: [             // The root component that starts the app
    AppComponent
  ]
})

13. Angular vs React — Quick Comparison

14. Practice MCQs