Preface

Angular is a popular and modern JavaScript framework that can run on a wide range of platforms. It comes with a rich set of features right out of the box, along with a variety of development tools that make it appealing to the developer community. This updated fourth version of "Angular Projects" will teach you how to build efficient and optimized web applications in Angular using best practices and modern techniques.

You will begin by exploring the essential features of the framework through the creation of 10 different real-world applications. Each application will demonstrate how to integrate various tools, including component UI libraries, backend technologies, AI agents, and native APIs. As you progress, you will learn how to implement popular technologies such as Angular Signals, Control Flow Syntax, Angular Server-Side Rendering (SSR), Firebase AI Logic, Google GenKit, native Web APIs, and more. You will work on projects such as an order management system, an AI-enabled booking system, a POS web application, and many other exciting projects, including a suite of software applications for factories.

By the end of this book, you will have the skills needed to build real-world applications and enhance your development portfolio.

Who this book is for

This book is for developers with beginner-level Angular experience who want to become proficient in using essential tools and dealing with the various use cases in Angular. Beginner-level knowledge of web application development and basic experience working with the latest JavaScript or TypeScript is essential before you dive in.

This book focuses on practical applications of Angular. If you want to deepen your understanding of this framework, we recommend that you also look at Learning Angular by the same author.

What this book covers

Chapter 1, Angular AI Kick-Starter: Scaffolding Smart Apps with Copilot, describes how to scaffold an Angular application from scratch, how to set up VSCode for Angular development, and how to use AI techniques by configuring GitHub Copilot to use modern Angular best practices.

Chapter 2, IssueTracker Lite: Building a Smart Bug Tracking System, will show you how to build an issue tracking system where users will be able to add new issues to the system or resolve issues that have been completed.

Chapter 3, EasyMenu: Creating a Table Order Management App, shows you how to build an application that helps a waiter take orders by selecting items from the main menu and associating orders with specific tables.

Chapter 4, SmartFactory Picker: Building a QR-Driven Warehouse App, explores how to build an application to pick items in a Warehouse Management System (WMS) using QR codes to identify items.

Chapter 5, CityPass Parking: Developing an AI-Enabled Parking Validator, explains how to build an application that traffic wardens can use to check if a car has the right to park in a specific location, either by filling a form or using an AI assistant.

Chapter 6, Studio BookMaster: Designing an AI-Enhanced Room Booking App, explains how to build an application for booking rooms in a music studio, how to view free slots per room on a calendar, and how to make a new reservation.

Chapter 7, Expense Builder: Building an SSR-Optimized Expense Tracker, covers the creation of an application for reporting expenses of an apartment building using specially designed forms.

Chapter 8, SmartFactory Shifts: Creating a Drag-and-Drop Shift Scheduler, illustrates how to build a calendar-style application for shift managers using drag and drop functionality.

Chapter 9, Flash POS: Building a Modern Point of Sale App with State Management, provides a starting point for building a POS application where users can select items per category and add them to a shopping cart.

Chapter 10, NotesAI Desktop: Creating an AI-Powered Note Editor, explains how to use native Web APIs to build a web application that can save data offline and summarize it using AI.

To get the most out of this book

You will need a version of Angular 22 installed on your computer, preferably the latest one. All code examples have been tested using Angular 22.0.0 on Windows OS but they should work with any future release of Angular 22 as well.

Download the example code files

This book includes a complete downloadable code bundle containing all the example projects and files used throughout the chapters. We recommend downloading the bundle so you can follow along smoothly and experiment with the examples.

Use the bundle as a practical starting point. Modify it, extend it, and apply what you learn by creating your own variations as you progress through the chapters.

Get the code bundle

If you bought the book directly from Packt:

1. Go to packtpub.com
2. Click your profile picture and select Your Orders
3. Find this book and click Download Code

If you bought this book from Amazon or any other channel partner:

1. Go to packtpub.com/unlock or scan the following QR code

   

2. Search for this book
3. Sign up or log in to your free Packt account
4. Upload your proof of purchase and download the code bundle locally

Usage note: You're free to use and modify this code for personal learning and non-commercial projects.

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. For example: " Open the app.ts file and create the following constructor to set the chapter title:"

A block of code is set as follows:

constructor() {
  this.chapterTitleService.setTitle(
    'Chapter 3: EasyMenu'
  );
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

return this.http.post(this.apiUrl + '/reservations',
  {
    name,
    email,
    start: date,
    room
  }
);

Any command-line input or output is written as follows:

npm install genkit @genkit-ai/google-genai
npm install @nestjs/config

Bold: Indicates a new term, an important word, or words that you see on the screen. For instance, words in menus or dialog boxes appear in the text like this. For example: " Finally, we explored how to schedule working shifts using the scheduler component. In the next chapter, we will build a Point of Sales (POS) application for the retail sector."

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book or have any general feedback, please email us at [email protected] and mention the book's title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you reported this to us. Please visit http://www.packt.com/submit-errata, click Submit Errata, and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit http://authors.packt.com/.