Movie App Using Angular

We will be creating a Movie Search Engine using Angular. This application allows users to search for movies by entering keywords and fetching and displaying a list of movie results in card format.

The search engine initially loads a default set of movies to showcase the functionality. Through this project, you'll see how to build a responsive and interactive movie search feature using Angular.

Prerequisites

• Node.js
• Angular CLI
• TypeScript

Approach

• For Movie App using Angular, we will be working on Angular 16.
• We will add Angular Material for better UI components.
• In this, as we search for a movie name, movie names relevant to the name searched gets appeared.
• If the Movie Name searched does not match any name in Database, it returns No movie Found.

Steps to Create Quiz App using Angular

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new movie-app
cd movie-app

Step 3: Install Angular Material

Install Angular Material for better UI components:

ng add @angular/material 

Dependencies

"dependencies": {
 "@angular/animations": "^16.2.0",
 "@angular/cdk": "^16.2.14",
 "@angular/common": "^16.2.0",
 "@angular/compiler": "^16.2.0",
 "@angular/core": "^16.2.0",
 "@angular/forms": "^16.2.0",
 "@angular/material": "^16.2.14",
 "@angular/platform-browser": "^16.2.0",
 "@angular/platform-browser-dynamic": "^16.2.0",
 "@angular/router": "^16.2.0",
 "rxjs": "~7.8.0",
 "tslib": "^2.3.0",
 "zone.js": "~0.13.0"
}

Project Structure

Example: Create the required files as seen in the Folder Structure and add the following codes. We will be using Open Movie Database Api for generating the list of movies.

To start the application run the following command

Open the terminal, run this command from your root directory to start the application

ng serve --open

Open your browser and navigate to http://localhost:4200

Output