Angular Cookbook E-Book

Muhammad Ahsan Ayaz

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Veröffentlichungsjahr: 2023

Beschreibung

Angular has long been the framework of choice for web development projects of various scales, offering much-needed stability and a rich tooling ecosystem for building production-ready web and mobile apps. This recipe-based guide ensures high performance apps with the latest version of Angular, helping you to build up your Angular expertise with a wide range of recipes across key tasks in web development.

In this second edition, the recipes have been updated, added, and improved based on developer feedback, new challenges, and Angular 17. The first few chapters will show you how to utilize core Angular concepts such as components, directives, and services to get you ready for building frontend web apps. You’ll then develop web components with Angular and go on to learn about advanced concepts such as dynamic components loading and state management with NgRx for achieving real-time performance.

Later chapters will focus on recipes for effectively testing your Angular apps to make them fail-safe, before progressing to techniques for optimizing your app’s performance. Finally, you’ll create Progressive Web Apps (PWA) with Angular to provide an intuitive experience for users.

By the end of this book, you’ll be able to create full-fledged, professional-looking Angular apps and have the skills you need for frontend development.

Leseprobe

Angular Cookbook

Second Edition

Over 80 actionable recipes every Angular developer should know

Muhammad Ahsan Ayaz

BIRMINGHAM—MUMBAI

“Angular” and the Angular Logo are trademarks of the Google LLC

Angular Cookbook

Second Edition

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Senior Publishing Product Manager: Suman Sen

Acquisition Editor – Peer Reviews: Gaurav Gavas

Project Editor: Amisha Vathare

Content Development Editor: Shazeen Iqbal

Copy Editor: Safis Editing

Technical Editor: Anjitha Murali

Proofreader: Safis Editing

Indexer: Subalakshmi Govindhan

Presentation Designer: Ganesh Bhadwalkar

Developer Relations Marketing Executive: Priyadarshini Sharma

First published: August 2021

Second edition: December 2023

Production reference: 1211223

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK.

ISBN 978-1-80323-344-4

www.packt.com

Contributors

About the author

Muhammad Ahsan Ayaz is a father, a son, a brother to two awesome siblings, a husband to a caring and supportive wife, a Muslim, a Google Developers Expert (GDE) in Angular, a software architect, and an educator. Over the past decade, he has trained thousands of developers through free video courses, one-to-one mentoring, and workshops. He has created lots of open-source and free software, including ngx-device-detector, which had amassed over 10 million installs by the end of 2023, with over 4500 projects utilizing it solely on GitHub. Ahsan is passionate about assisting the startup ecosystem and product owners in bringing their ideas to life using JavaScript, Angular, and web technologies. Furthermore, Ahsan also runs a community called “Code with Ahsan,” boasting a membership of over 25,000 developers worldwide. You can access Ahsan’s technical articles and free courses at https://codewithahsan.dev, as well as his video tutorials at https://youtube.com/codewithahsan.

I want to express my gratitude to the almighty Allah for enabling me to work on this book, so that a significant number of people can benefit from it, and for the fact that I learned a lot while I was working on this book. I also want to extend my heartfelt thanks to the people who have played a pivotal role in my life journey and whatever little I have achieved. Especially my parents (Zahida Khatoon and Muhammad Ayaz), who have always prioritized my needs before their own and raised me to become the person I am today. I also want to thank my wife, Najla, who has supported me throughout the years to continue my passion for educating others and providing guidance during moments when I needed clarity and to make thoughtful decisions. Additionally, I wish to thank Amisha Vathare, Suman Sen, and Shazeen Iqbal, and everyone from Packt who have helped me in ensuring the exceptional quality of the content in this book. Special thanks to Marcell Kiss (marcell.tech) for conducting a comprehensive technical review of the book.

About the reviewer

Marcell Kiss, MSc, is an independent Angular consultant who advises enterprise clients on maintainable frontend architectures. He also serves as a part-time trainer at Angular Architects and is the organizer of the Angular Hungary Meetup.

I deeply appreciate the endless patience of my family while I was spending long hours reviewing this book.

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/AngularCookbook2e

Contents

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Winning Component Communication

Technical requirements

Component communication using component @Input and @Output properties

Getting ready

How to do it…

How it works…

See also

Component communication using services

Getting ready

How to do it…

How it works…

See also

Using setters for intercepting input property changes

Getting ready

How to do it…

How it works…

See also

Using ngOnChanges to intercept input property changes

Getting ready

How to do it…

How it works…

See also

Accessing a child component in a parent template via template variables

Getting ready

How to do it…

How it works…

See also

Accessing a child component in a parent component class using ViewChild

Getting ready

How to do it…

How it works…

See also

Standalone components and passing data through route params

Getting ready

How to do it…

How it works…

See also

Component communication using signals

Getting ready

How to do it

How it works

See also

Working with Angular Directives and Built-In Control Flow

Technical requirements

Using attribute directives to handle the appearance of elements

Getting ready

How to do it…

How it works…

See also

Creating a directive to calculate the read time for articles

Getting ready

How to do it…

How it works…

See also

Creating a directive that allows you to vertically scroll to an element

Getting ready

How to do it…

How it works…

See also

Writing your first custom structural directive

Getting ready

How to do it…

How it works…

See also

How to apply multiple structural directives to the same element

Getting ready

How to do it…

How it works…

See also

Applying multiple directives to the same element using the Directive Composition API

Getting ready

How to do it…

How it works…

See also

The Magic of Dependency Injection in Angular

Technical requirements

Using Angular DI tokens

Getting ready

How to do it...

How it works…

See also

Optional dependencies

Getting ready

How to do it…

How it works

See also

Creating a singleton service using providedIn

Getting ready

How to do it

How it works

See also

Creating a singleton service using forRoot()

Getting ready

How to do it

How it works

See also

Providing alternate classes against the same DI Token

Getting ready

How to do it

How it works

See also

Dynamic configurations using value providers

Getting ready

How to do it

How it works

See also

Understanding Angular Animations

Technical requirements

Creating your first two-state Angular animation

Getting ready

How to do it…

How it works…

See also

Working with multi-state animations

Getting ready

How to do it…

How it works…

See also

Creating complex Angular animations using keyframes

Getting ready

How to do it…

How it works…

See also

Animating lists in Angular using stagger animations

Getting ready

How to do it…

How it works…

See also

Sequential vs parallel animations in Angular

Getting ready

How to do it…

How it works…

See also

Route animations in Angular

Getting ready

How to do it…

How it works…

See also

Disabling Angular animations conditionally

Getting ready

How to do it…

How it works…

See also

Angular and RxJS – Awesomeness Combined

Technical requirements

Sequential and parallel http calls in Angular with RxJS

Getting ready

How to do it…

How it works…

See also

Listening to multiple observable streams

Getting ready

How to do it…

How it works…

See also

Unsubscribing streams to avoid memory leaks

Getting ready

How to do it…

How it works…

There’s more…

See also

Using Angular’s async pipe to unsubscribe streams automatically

Getting ready

How to do it…

How it works…

See also

Using the map operator to transform data

Getting ready

How to do it…

How it works…

See also

Using the switchMap and debounceTime operators with autocompletes for better performance

Getting ready

How to do it…

How it works…

See also

Creating a custom RxJS operator

Getting ready

How to do it…

How it works…

See also

Retrying failed HTTP calls with RxJS

Getting ready

How to do it…

How it works…

See also

Reactive State Management with NgRx

Technical requirements

Creating your first NgRx store with actions and reducers

Getting ready

How to do it…

See also

Using NgRx Store Devtools to debug state changes

Getting ready

How to do it…

How it works…

There’s more…

See also

Using NgRx selectors to select and render state in components

Getting ready

How to do it…

How it works…

See also

Using NgRx effects to fetch data from API calls

Getting ready

How to do it…

How it works…

See also

Using NgRx Component Store to manage the state of a component

Getting ready

How to do it…

How it works…

See also

Understanding Angular Navigation and Routing

Technical requirements

Creating routes in an Angular (standalone) app

Getting ready

How to do it…

How it works…

See also

Lazily loaded routes in Angular

Getting ready

How to do it…

How it works…

See also

Preloading route strategies

Getting ready

How to do it…

How it works…

See also

Authorized access to routes using route guards

Getting ready

How to do it…

How it works…

See also

Working with route parameters

Getting ready

How to do it…

How it works…

See also

Showing a global loader between route changes

Getting ready

How to do it…

How it works…

See also

Mastering Angular Forms

Technical requirements

Creating your first template-driven form with validation

Getting ready

How to do it…

How it works…

See also

Creating your first reactive form with validation

Getting ready

How to do it…

How it works…

See also

Testing forms in Angular

Getting ready

How to do it…

How it works…

See also

Server-side validation using asynchronous validator functions

Getting ready

How to do it…

How it works...

See also

Implementing complex forms with reactive FormArray

Getting ready

How to do it…

How it works…

See also

Writing your own custom form control using ControlValueAccessor

Getting ready

How to do it…

How it works…

See also

Angular and the Angular CDK

Technical requirements

Using virtual scroll for huge lists

Getting ready

How to do it…

How it works…

See also

Keyboard navigation for lists

Getting ready

How to do it…

How it works…

See also

Pointy little popovers with the Overlay API

Getting ready

How to do it…

How it works…

See also

Input coercion utilities from the Angular CDK

Getting ready

How to do it…

How it works…

See also

Using the CDK Drag and Drop API to move items from one list to another

Getting ready

How to do it…

How it works…

See also

Creating a multi-step game with the CDK Stepper API

Getting ready

How to do it…

How it works…

See also

Accessible listbox interactions using CDK Listbox directives

Getting ready

How to do it…

How it works…

See also

Working with nested menus using the Angular CDK Menu API

Getting ready

How to do it…

How it works…

See also

Writing Unit Tests in Angular with Jest

Technical requirements

Setting up unit tests in Angular with Jest

Getting ready

How to do it...

Bonus: Migrating to Jest in Angular v16

See also

Providing global mocks for Jest

Getting ready

How to do it...

How it works...

See also

Mocking Angular services using stubs

Getting ready

How to do it...

How it works...

See also

Using spies on an injected service in a unit test

Getting ready

How to do it...

How it works...

See also

Mocking child components and directives using the ng-mocks package

Getting ready

How to do it...

How it works...

See also

Writing even easier tests with Angular CDK component harnesses

Getting ready

How to do it...

How it works...

See also

Unit-testing responses from HTTP calls

Getting ready

How to do it...

How it works...

See also

Unit-testing Angular pipes

Getting ready

How to do it...

See also

E2E Tests in Angular with Cypress

Technical requirements

Writing your first Cypress test

Getting ready

How to do it…

How it works…

See also

Validating if a DOM element is visible on the view

Getting ready

How to do it…

How it works…

See also

Testing form inputs and submission

Getting ready

How to do it…

How it works…

See also

Waiting for XHRs to finish

Getting ready

How to do it…

How it works…

See also

Using Cypress bundled packages

Getting ready

How to do it…

How it works…

See also

Using Cypress fixtures to provide mock data

Getting ready

How to do it…

How it works…

See also

Performance Optimization in Angular

Technical requirements

Using OnPush change detection to prune component subtrees

Getting ready

How to do it…

How it works…

See also

Detaching the change detector from components

Getting ready

How to do it…

How it works…

See also

Running async events outside Angular with runOutsideAngular

Getting ready

How to do it…

How it works…

See also

Using trackBy for lists with *ngFor

Getting ready

How to do it…

How it works…

See also

Moving heavy computation to pure pipes

Getting ready

How to do it…

How it works…

See also

Using web workers for heavy computation

Getting ready

How to do it…

How it works…

See also

Using performance budgets for auditing

Getting ready

How to do it…

How it works…

See also

Analyzing bundles with webpack-bundle-analyzer

Getting ready

How to do it…

See also

Building PWAs with Angular

Technical requirements

Converting an existing Angular app into a PWA with the Angular CLI

Getting ready

How to do it…

How it works…

See also

Modifying the theme color for your PWA

Getting ready

How to do it…

See also

Using dark mode in your PWA

Getting ready

How to do it…

See also

Providing a custom installable experience in your PWA

Getting ready

How to do it…

How it works…

See also

Precaching requests using an Angular service worker

Getting ready

How to do it…

How it works…

See also

Creating an App Shell for your PWA

Getting ready

How to do it…

How it works…

See also

Other Books You May Enjoy

Index

Landmarks

Cover

Index

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:

Scan the QR code or visit the link below

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

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly