Project Title: Movie Ticket Booking System

1. Introduction
The Movie Ticket Booking System is a web application developed using Angular, a modern
frontend framework. This system allows users to view a list of available movies and
conveniently book tickets by selecting the desired movie, entering their name, and specifying
the number of tickets required.With increasing demand for digital solutions, this project aims
to replace manual ticket booking with an interactive and user-friendly interface, reducing
human error and improving booking efficiency.
The Movie Ticket Booking System is a web application built using Angular, one of the most
popular front-end development frameworks. This system allows users to browse a list of
movies and book tickets by filling in a simple form.
The application simulates a real-world use case by implementing modern web development
techniques. It is designed with user-friendly navigation, dynamic interaction using Angular’s
two-way binding, and smooth routing between components. This makes the application not
only a learning tool but also a base for future real-world projects.

2. Abstract
The objective of this project is to create a responsive single-page web application using
Angular that provides a simple movie ticket booking experience. The application includes:
 Displaying a list of available movies.
 Booking a selected movie.
 Input form to enter user details and number of tickets.
 Automatic price calculation (₹190 per ticket).
 Booking confirmation alert.
This project uses core Angular features including:
 Components and routing,
 Template-driven forms and data binding,
 Services and navigation,
 TypeScript for logic and calculation,
 CSS for styling a clean, minimal layout.
The system is fully functional for front-end demonstration and can be extended in the
future to include features like user login, seat selection, payment integration, and
backend API connectivity.

1|Page
3. Scope of the project
The scope of this project includes the following:

3.1 Educational Purpose

 Helps students learn and apply Angular concepts like components, routing, forms,
two-way binding, and event handling.

3.2 Functional Scope

 View movie list
 Book tickets for selected movie
 Enter name and number of tickets
 View total amount
 Confirm booking with a user alert

3.3Technical Scope
 Developed entirely in Angular 15+
 Uses TypeScript and HTML/CSS
 Can be deployed locally or hosted on platforms like GitHub Pages or Firebase
Hosting
 Easily extensible to integrate with APIs or backend

4. Usage
This Movie Ticket Booking System provides a simple and user-friendly interface that enables
users to:
4.1 View Available Movies:
Users are shown a list of available movies on the homepage.
4.2 Book Tickets Easily:
By clicking the "Book" button next to a movie, users are taken to the booking form.
4.3 Enter Booking Details:
Users input their name and the number of tickets they want to book.
4.4 Automatic Price Calculation:
The system calculates the total amount based on a fixed ticket price (₹190 per ticket).
4.5 Confirm Booking:
On clicking "Confirm Booking", a confirmation popup appears showing the user’s
booking details.
This project is ideal for learning Angular concepts and simulating a basic real-world ticket
booking system.

2|Page
5. Features
Here are the key features of this project:
5.1 Movie List Page
 Displays a clean, styled list of movies.
 Includes a "Book" button for each movie.
 Uses Angular component for dynamic rendering.
5.2 Booking Page
 Booking form with:
o Name input field
o Number of tickets input
o Live price calculation
 Angular two-way data binding and form validation.
 Displays total price dynamically.
 Angular routing used to navigate between pages.
5.3 Angular Concepts Used
 Components (MovieListComponent, BookingComponent)
 Routing and Navigation
 Template-driven Forms with [(ngModel)]
 Event Binding and Conditional Logic
 Dynamic price calculation using TypeScript
 User input validation and alert on booking
5.4 Extra Advantages
 Fully front-end — no need for backend setup.
 Easy to run in VS Code using Angular CLI.
 Clean UI using simple CSS — responsive and readable.
 Can be extended to include backend/API integration in the future.

3|Page
6. File Structure
├─── README.md
├─── src
│ ├─── models
│ │ └─── movie.model.ts
│ ├─── services
│ │ └─── movie.service.ts
│ ├─── components
│ │ ├─── movie-list
│ │ │ ├─── movie-list.component.ts
│ │ │ └─── movie-list.component.html
│ │ ├─── movie-details
│ │ │ ├─── movie-details.component.ts
│ │ │ └─── movie-details.component.html
│ ├─── app
│ │ ├─── app.module.ts
│ │ ├─── app-routing.module.ts
│ │ └─── app.component.ts
│ ├─── assets
│ │ └─── ... (e.g., images, styles)
│ ├─── environments
│ │ ├─── environment.ts
│ │ └─── environment.prod.ts
│ ├─── index.html
│ ├─── main.ts
│ ├─── polyfills.ts
│ └─── styles.css
├─── angular.json
├─── package.json
├─── tsconfig.json

4|Page
7. Source code:
7.1 Create Angular App
Run in terminal:
ng new movie-ticket-booking
cd movie-ticket-booking
ng add @angular/material (optional)

7.2 Generate Components and Service

ng generate component components/movie-list
ng generate component components/movie-details
ng generate service services/movie
ng generate interface models/movie --type=model

7.3 src/app/models/movie.model.ts
export interface Movie {
id: number;
title: string;
description: string;
genre: string;
releaseDate: string;}

7.4 src/app/services/movie.service.ts
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Movie } from '../models/movie.model';
@Injectable({ providedIn: 'root' })
export class MovieService {
private movies: Movie[] = [
{ id: 1, title: 'Avengers: Age of Ultron', description: 'Earth’s mightiest heroes must
come together again...', genre: 'Action', releaseDate: '2015-04-24' },
{ id: 2, title: 'Avengers: Infinity War', description: 'Thanos arrives to collect all the
Infinity Stones...', genre: 'Action', releaseDate: '2018-04-27' },
{ id: 3, title: 'Avengers: Endgame', description: 'The epic conclusion to the Infinity
Saga...', genre: 'Action', releaseDate: '2019-04-26' },

5|Page
 { id: 4, title: 'Thor', description: 'The powerful but arrogant god Thor is cast out of
Asgard...', genre: 'Fantasy', releaseDate: '2011-05-06' },
{ id: 5, title: 'Captain America', description: 'Steve Rogers becomes the super-
soldier Captain America...', genre: 'Adventure', releaseDate: '2011-07-22' }
];
getMovies(): Observable<Movie[]> {
return of(this.movies);
}
getMovieById(id: number): Observable<Movie | undefined> {
return of(this.movies.find(m => m.id === id)); }
}

7.5 src/app/components/movie-list/movie-list.component.ts
import { Component, OnInit } from '@angular/core';
import { MovieService } from '../../services/movie.service';
import { Movie } from '../../models/movie.model';
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html'
})
export class MovieListComponent implements OnInit {
movies: Movie[] = [];
constructor(private movieService: MovieService) {}
ngOnInit(): void {
this.movieService.getMovies().subscribe(data => this.movies = data);}}

7.6 src/app/components/movie-list/movie-list.component.html
<div class="container mt-4">
<h2>Available Movies</h2>
<div class="row">
<div *ngFor="let movie of movies" class="col-md-4">
<div class="card mb-3">
<div class="card-body">

6|Page
 <h5 class="card-title">{{ movie.title }}</h5>
<p class="card-text">{{ movie.description }}</p>
<p><strong>Price:</strong> ₹199 per ticket</p>
<button class="btn btn-primary float-end" [routerLink]="['/movie',
movie.id]">Book</button>
</div>
</div>
</div>
</div>
</div>

7.7 src/app/components/movie-details/movie-details.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MovieService } from '../../services/movie.service';
import { Movie } from '../../models/movie.model';
@Component({
selector: 'app-movie-details',
templateUrl: './movie-details.component.html'
})
export class MovieDetailsComponent implements OnInit {
movie: Movie | undefined;
customerName = '';
numberOfTickets = 1;
bookingDone = false;
constructor(private route: ActivatedRoute, private movieService: MovieService) {}
ngOnInit(): void {
const id = Number(this.route.snapshot.paramMap.get('id'));
this.movieService.getMovieById(id).subscribe(m => this.movie = m); }
bookNow(): void {
this.bookingDone = true;
alert('Booking Successful!'); }}

7|Page
7.8 src/app/components/movie-details/movie-details.component.html
<div class="container mt-4" *ngIf="movie">
<h2>{{ movie.title }}</h2>
<p>{{ movie.description }}</p>
<p><strong>Genre:</strong> {{ movie.genre }}</p>
<p><strong>Release Date:</strong> {{ movie.releaseDate }}</p>
<p><strong>Price:</strong> ₹199 per ticket</p>
<hr>
<h4>Book Tickets</h4>
<form (ngSubmit)="bookNow()">
<div class="mb-3">
<label class="form-label">Name:</label>
<input type="text" [(ngModel)]="customerName" name="customerName" class="form-
control" required>
</div>
<div class="mb-3">
<label class="form-label">Number of Tickets:</label>
<input type="number" [(ngModel)]="numberOfTickets" name="numberOfTickets"
class="form-control" min="1" required>
</div>
<button type="submit" class="btn btn-success">Book Now</button>
</form>
<div *ngIf="bookingDone" class="alert alert-success mt-3">
Booking Successful for {{ numberOfTickets }} ticket(s), {{ customerName }}!
</div>
</div>

7.9 src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MovieListComponent } from './components/movie-list/movie-list.component';

8|Page
import { MovieDetailsComponent } from './components/movie-details/movie-
details.component';
const routes: Routes = [
{ path: '', component: MovieListComponent },
{ path: 'movie/:id', component: MovieDetailsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

7.10 app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MovieListComponent } from './components/movie-list/movie-list.component';
import { MovieDetailsComponent } from './components/movie-details/movie-
details.component';
@NgModule({
declarations: [AppComponent, MovieListComponent, MovieDetailsComponent],
imports: [BrowserModule, AppRoutingModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

9|Page
8. Output:

10 | P a g e
9. Conclusion
This project successfully delivers a foundational movie ticket booking system with a user-
friendly interface and essential features. The application allows customers to browse movies,
select showtimes, and book tickets. Key features include a straightforward booking process,
and clear display of ticket information. The addition of a generated ticket image provides a
helpful visual confirmation for the user.
Overall, this project demonstrates the potential to streamline the movie ticket booking
process, offering a convenient alternative to traditional methods. With further development,
this system could evolve into a robust and feature-rich solution for both moviegoers and
cinema operators.

11 | P a g e