Reader small image

You're reading from  Angular Cookbook - Second Edition

Product typeBook
Published inDec 2023
Reading LevelBeginner
PublisherPackt
ISBN-139781803233444
Edition2nd Edition
Languages
Tools
Right arrow
Author (1)
Muhammad Ahsan Ayaz
Muhammad Ahsan Ayaz
author image
Muhammad Ahsan Ayaz

Muhammad Ahsan Ayaz is a Google developers expert in Angular, a software architect, and a head instructor of JavaScript at the School of Applied Technology. He loves helping the start-up ecosystem and product owners to bring their ideas to life using JavaScript, Angular, and web technologies. He has built several open-source projects that he maintains and he speaks at events, along with creating articles and video courses.
Read more about Muhammad Ahsan Ayaz

Right arrow

Preface

Angular is one of the most popular frameworks in the world for building not only web applications but even mobile and desktop applications as well. Backed by Google and used by Google, this framework is used by millions of applications. Although the framework is well-suited for applications of any scale, enterprises particularly favor Angular due to its opinionated nature and its consistent ecosystem, which includes all the tools necessary for creating modern & production-ready web applications.

While learning the core technologies such as JavaScript, HTML, and CSS is an absolute essential to progress as a web developer, when it comes to a framework, learning the core concepts of the framework itself is important too. When we’re dealing with Angular, there are a lot of amazing things we can do with our web applications by learning about, and using, the right tools in the Angular ecosystem. That’s where this book comes in.

This book was written for intermediate and advanced Angular developers to polish their Angular development skills with recipes that you can follow easily, play around with, and practice your own variations of. You’ll not only learn from the recipes themselves but also from the actual real-life projects associated with the recipes. So, there are a lot of hidden gems in these recipes and projects for you.

Happy coding!

Who this book is for

The book is for intermediate-level Angular web developers looking for actionable solutions to common problems in Angular enterprise development. Mobile developers using Angular technologies will also find this book useful. Working experience with JavaScript and TypeScript is necessary to understand the topics covered in this book more effectively.

What this book covers

Chapter 1, Winning Component Communication, explains different techniques to use to implement communication between components in Angular. @Input() and @Output() decorators, services, and lifecycle hooks are covered. The chapter also covers Angular Signals, which became stable in Angular v17.

Chapter 2, Working with Angular Directives and Built-In Control Flow introduces Angular directives and some recipes that use attribute directives, structural directives, and the Directive Composition API.

Chapter 3, The Magic of Dependency Injection in Angular, includes recipes that cover optional dependencies, configuring an injection token, using the providedIn: 'root' metadata for Angular services, value providers, and aliased class providers.

Chapter 4, Understanding Angular Animations, contains recipes for implementing multi-state animations, staggering animations, keyframe animations, and animations for switching between routes in your Angular apps.

Chapter 5, Angular and RxJS – Awesomeness Combined, covers recipes on RxJS for executing sequential and parallel HTTP calls. It also has some recipes on the usage of the combineLatest, flatMap, debounceTime, and switchMap operators and covers some tips and tricks about using RxJS streams.

Chapter 6, Reactive State Management with NgRx, has recipes concerning the famous NgRX library and its core concepts. It covers core concepts such as NgRx actions, reducers, selectors, and effects and looks at using packages such as @ngrx/store-devtools and @component/store.

Chapter 7, Understanding Angular Navigation and Routing, explores recipes on lazily loaded routes, route guards, route preloading strategies, and some interesting techniques to be used with the Angular router.

Chapter 8, Mastering Angular Forms, covers recipes for template-driven forms, reactive forms, form validation, testing forms, form arrays, and creating your own form control.

Chapter 9, Angular and the Angular CDK, has a lot of cool Angular CDK recipes, including ones on virtual scroll, keyboard navigation, the overlay API, the CDK Menu, CDK drag and drop, the CDK stepper API, and the CDK Listbox API.

Chapter 10, Writing Unit Tests in Angular with Jest, covers recipes for unit testing with Jest, exploring global mocks in Jest, mocking services/child components/pipes, using Angular CDK component harnesses, and unit testing Observables.

Chapter 11, E2E Tests in Angular with Cypress, has recipes on E2E testing with Cypress in Angular apps. It covers validating forms, waiting for XHR calls, mocking HTTP call responses, using bundled packages with Cypress, and using fixtures in Cypress.

Chapter 12, Performance Optimization in Angular, contains some cool techniques to improve an Angular app’s performance by using the OnPush change detection strategy, lazily loading feature routes, detaching the change detector from a component, using web workers with Angular, using pure pipes, adding performance budgets to an Angular app, and using the webpack-bundle analyzer.

Chapter 13, Building PWAs with Angular, contains recipes to create a PWA with Angular. It covers specifying a theme color for the PWA, using a device’s dark mode, providing a custom PWA install prompt, precaching requests using Angular’s service worker, and using App Shell.

To get the most out of this book

The recipes of this book are built with Angular v17 and Angular follows semantic versioning for their releases. Since Angular is constantly being improved, for the sake of stability, the Angular team has provided a predictable release cycle for updates. The release frequency is as follows:

  • A major release every 6 months.
  • 1 to 3 minor releases for each major release.
  • A patch release and pre-release (next or rc) build almost every week.

Source: https://angular.io/guide/releases#release-frequency

Software covered in the book

Operating System requirements

Angular v17

Windows, macOS, or Linux

TypeScript 5.x+

Nx v17

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Once you’ve finished reading the book, make sure to tweet to to let me know your feedback about the book. In addition, you can modify the code provided with this book to your taste, upload it to your GitHub repository, and share it. I’ll make sure to retweet it:)

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Angular-Cookbook-2E. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/gbp/9781803233444.

Conventions used

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

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “Now, we’ll move the code from the the-amazing-list-component.html file to the the-amazing-list-item.component.html file for the item’s markup.”

A block of code is set as follows:

openMenu($event, itemTrigger) {
    if ($event) {
      $event.stopImmediatePropagation();
    }
    this.popoverMenuTrigger = itemTrigger;
    this.menuShown = true;
  }

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

.menu-popover {
  ...
  &::before {...}
  &--up {
    transform: translateY(-20px);
    &::before {
      top: unset !important;
      transform: rotate(180deg);
      bottom: -10px;
    }
  }
  &__list {...}
}

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “You will notice that we can’t see the entirety of the content of the input—this is somewhat annoying at the best of times because you can’t really review it before pressing the Action button.”

IMPORTANT NOTES

Appear like this.

TIPS

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at customercare@packtpub.com and mention the book 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 would report this to us. Please visit www.packtpub.com/support/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 copyright@packt.com 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 authors.packtpub.com.

Share your thoughts

Once you’ve read Angular Cookbook - Second Edition, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

  1. Scan the QR code or visit the link below

https://packt.link/free-ebook/9781803233444

  1. Submit your proof of purchase
  2. That’s it! We’ll send your free PDF and other benefits to your email directly
lock icon
The rest of the chapter is locked
You have been reading a chapter from
Angular Cookbook - Second Edition
Published in: Dec 2023Publisher: PacktISBN-13: 9781803233444
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €14.99/month. Cancel anytime

Author (1)

author image
Muhammad Ahsan Ayaz

Muhammad Ahsan Ayaz is a Google developers expert in Angular, a software architect, and a head instructor of JavaScript at the School of Applied Technology. He loves helping the start-up ecosystem and product owners to bring their ideas to life using JavaScript, Angular, and web technologies. He has built several open-source projects that he maintains and he speaks at events, along with creating articles and video courses.
Read more about Muhammad Ahsan Ayaz