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 any scale of application, enterprises especially like Angular because of it being opinionated and because of its consistent ecosystem that includes all the tools you need to create a web technologies-based application.

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 pretty 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 Components Communication, explains different techniques to use to implement communication between components in Angular. @Input() and @Output() decorators, services, and lifecycle hooks are covered as well. There is also a recipe for how to create a dynamic Angular component.

Chapter 2, Understanding and Using Angular Directives, gives an introduction to Angular directives and some recipes that use Angular directives, including attribute directives and structural directives.

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 instance and static methods. It also has some recipes on the usage of the combineLatest, flatMap, 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, preloading route 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, 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 clipboard API, CDK drag and drop, the CDK stepper API, and the CDK textfield 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 Optimizations 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 v12 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

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 https://ahsanayaz.com/twitter 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. 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://static.packt-cdn.com/downloads/9781838989439_ColorImages.pdf.

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."

Tips or important notes

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 [email protected] 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 [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 authors.packtpub.com.

Share Your Thoughts

Once you've read Angular Cookbook, we'd love to hear your thoughts! Please click here to go straight to the Amazon review page https://packt.link/r/1838989439 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
44.195.47.227