Angular: Hands-On Arcade Lab - Build, Play, and Learn Modern Angular!

Presented by Google Developer Group on Campus - Asia Pacific University Chapter

📅 Event Details

Date: Wednesday, 2 September 2026

Time: 6:30 PM - 9:00 PM (MYT)

Venue: S-08-02 Classroom* (APU Campus) + Online via Bevy

Format: Hybrid (In-person & Online via Bevy)

Duration: 2.5 Hours

Department: Web Department

Workshop Lead: Kok Jia Yin

🎯 About This Workshop

Want to learn Angular by actually building something instead of just watching tutorials? Join us for Angular: Hands-On Arcade Lab, a beginner-friendly, practical workshop where you’ll learn modern Angular concepts through an interactive Arcade Lab / Escape Room experience.

Throughout the workshop, participants will build an interactive web application using Angular 21, learning how data is fetched, displayed, and transformed into an engaging user interface. You’ll get hands-on experience with modern Angular features such as Signals, Standalone Components, modern Control Flow (@if and @for), Dependency Injection, HttpClient, and RxJS.

Rather than focusing heavily on theory, this workshop is designed around a practical learning experience. You’ll follow along with the development process, understand how different Angular concepts connect together, and see how they can be used to create an interactive real-world application.

By the end of the session, participants will have a better understanding of how modern Angular applications are structured, how reactive state is managed, and how frontend applications can respond dynamically to user interactions.

👥 Who Should Attend?

This workshop is perfect for:

• Student interested in frontend and web development.

• Beginners who want to start learning Angular

• Developers familiar with HTML, CSS, and JavaScript/Typescript

• Anyone interested in building interactive web applications

• Web developers who want to explore the latest features in Angular 21

Prerequisites:

• Basic understanding of HTML and CSS

• Basic understanding of JavaScript / Typescript

• Basic Understanding of Git

• No prior Angular experience is required

📚 What You’ll Learn

By the end of this workshop, you will:

✅ Understand the fundamentals of Angular 21 and Standalone Components.

✅ Learn how to manage reactive application state using Angular Signals

✅ Fetch and handle external data using HTTPClient and RxJS

✅ Explore internationalization (i8n) and accessibility with ARIA

✅ Build an interactive Arcade Lab / Escape Room application

⏱️ Workshop Agenda

6:30 PM - 6:45 PM | Welcome and Introduction

• Objectives of the workshop

• Introduction to Angular 21

6:45 PM - 7:15 PM | Project Setup & Demo

• Project demonstration

• Understanding the project structure

• Useful Visual Studio Code shortcuts

• Debug Control Panel acknowledgement

7:15 PM - 7:30 PM | Module 1: Where is the Data From?

• Introduction to data fetching

• RxJS forkJoin

• HttpClient data fetching

7:30 PM - 8:00 PM | Module 2: Connecting Data to the UI

• Dependency Injection

• Angular Signals

• Template data binding using @for and @if

8:00 PM - 8:30 PM | Module 3: Game Interaction & UI Feedback

• Keyboard Input & @HostListener

• Updating Signals

• Number formatting with Pipes

• Internationalization i18n

• Aria Accessibility

8:30 PM - 9:00 PM | Quiz and Wrapping Up Session

• Hands-on Quiz

• Recap of key takeaways

• Troubleshooting and QnA Session

🛠️ Tools & Platforms

• Angular 21

• Node.js LTS (20.x or later)

• Visual Studio Code

• Angular Language Service

• Git

• SCSS

• RxJS

• HttpClient

💡 Why This Workshop?

Learning a new frontend framework can feel overwhelming when you’re faced with documentation, syntax, and unfamiliar concepts all at once. This workshop takes a more practical approach by turning Angular learning into an interactive Arcade Lab.

Instead of simply learning individual Angular features, you’ll see how concepts such as Signals, RxJS, HTTP data fetching, data binding, and user interaction work together inside an actual application.

The goal is to help participants build confidence with modern Angular while understanding the fundamentals behind interactive web applications. Whether you’re completely new to Angular or already have some frontend experience, this workshop provides an opportunity to learn, experiment, and build something fun along the way.

💬 Join The WhatsApp Group!

https://chat.whatsapp.com/LJwgqr8EfIzIsrtR0x8rCE?s=cl&p=i&mlu=4

📧 Any Questions?

Connect with us through our social media channels and send us a message!