This device is not compatible.


Build a Card Memory Game in Angular

In this project, we will build a memory card game with the countdown timer functionality in the Angular framework.

Build a Card Memory Game in Angular

You will learn to:

Use data binding in Angular.

Group similar functionality components into modules.

Implement dependency injection using Angular services.

Implement countdown functionality using Angular.


Web Development

Web Frameworks

Dependency Injection and Services


A working knowledge of Angular

Basic knowledge of Material UI

Familiarity with dependency injection



Material UI

Project Description

In this project, we will build a popular one-player memory card game in Angular, inspired by a card game known by many names like Memory, Concentration, and Shinkei-suijaku. Our version of this game is played with twelve cards of six matching pairs, under a countdown timer of 4040 seconds.

Initially, the cards are placed upside down in a grid. The player has to click a card to turn it over. Once a card has been turned over, the player has to click on another card. In case both cards form a matching pair, they’re removed from the grid, otherwise, both cards are turned back. To do well in this game, the player has to remember the cards after each failed attempt to match them.

We’ll use Material UI to design some elements of the game, and dependency injection to shuffle and retrieve images.

Project Tasks


Getting Started

Task 0: Introduction


User Interface and Routing

Task 1: Handle Component Routing

Task 2: Build the Header

Task 3: Display the Header

Task 4: Develop the Homepage

Task 5: Create Dialog Boxes


Build the Card Service

Task 6: Retrieve Image Paths

Task 7: Create Shuffle Logic

Task 8: Inject the Service


Develop the Cards Application

Task 9: Define a Model Interface

Task 10: Share Data Between Card and Setup Component

Task 11: Build the Card Layout

Task 12: Cards Setup

Task 13: Implement the Timer Logic

Task 14: Create the Card Grid

Task 15: Check for Game Completion

Task 16: Check for Card Matches

Task 17: Handle Card Clicks

Task 18: Implement the Restart Logic