Angular Cookbook - Second Edition

By : Muhammad Ahsan Ayaz

2.7 (3)

Buy this Book

Angular Cookbook - Second Edition

2.7 (3)

By: Muhammad Ahsan Ayaz

Buy this Book

Overview of this book

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 to Angular will help you build up your Angular expertise with a wide range of recipes across key tasks in web development and show you how to build high-performance apps. In this second edition, the recipes have been updated, added, and improved based on developer feedback and new challenges. 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.

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

Component communication using services

Using setters for intercepting input property changes

Using ngOnChanges to intercept input property changes

Accessing a child component in a parent template via template variables

Accessing a child component in a parent component class using ViewChild

Standalone components and passing data through route params

Component communication using signals

Free Chapter

Working with Angular Directives and Built-In Control Flow

Technical requirements

Using attribute directives to handle the appearance of elements

Creating a directive to calculate the read time for articles

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

Writing your first custom structural directive

How to apply multiple structural directives to the same element

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

The Magic of Dependency Injection in Angular

Technical requirements

Using Angular DI tokens

Optional dependencies

Creating a singleton service using providedIn

Creating a singleton service using forRoot()

Providing alternate classes against the same DI Token

Dynamic configurations using value providers

Understanding Angular Animations

Technical requirements

Creating your first two-state Angular animation

Working with multi-state animations

Creating complex Angular animations using keyframes

Animating lists in Angular using stagger animations

Sequential vs parallel animations in Angular

Route animations in Angular

Disabling Angular animations conditionally

Angular and RxJS – Awesomeness Combined

Technical requirements

Sequential and parallel http calls in Angular with RxJS

Listening to multiple observable streams

Unsubscribing streams to avoid memory leaks

Using Angular’s async pipe to unsubscribe streams automatically

Using the map operator to transform data

Using the switchMap and debounceTime operators with autocompletes for better performance

Creating a custom RxJS operator

Retrying failed HTTP calls with RxJS

Reactive State Management with NgRx

Technical requirements

Creating your first NgRx store with actions and reducers

Using NgRx Store Devtools to debug state changes

Using NgRx selectors to select and render state in components

Using NgRx effects to fetch data from API calls

Using NgRx Component Store to manage the state of a component

Understanding Angular Navigation and Routing

Technical requirements

Creating routes in an Angular (standalone) app

Lazily loaded routes in Angular

Preloading route strategies

Authorized access to routes using route guards

Working with route parameters

Showing a global loader between route changes

Mastering Angular Forms

Technical requirements

Creating your first template-driven form with validation

Creating your first reactive form with validation

Testing forms in Angular

Server-side validation using asynchronous validator functions

Implementing complex forms with reactive FormArray

Writing your own custom form control using ControlValueAccessor

Angular and the Angular CDK

Technical requirements

Using virtual scroll for huge lists

Keyboard navigation for lists

Pointy little popovers with the Overlay API

Input coercion utilities from the Angular CDK

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

Creating a multi-step game with the CDK Stepper API

Accessible listbox interactions using CDK Listbox directives

Working with nested menus using the Angular CDK Menu API

Writing Unit Tests in Angular with Jest

Technical requirements

Setting up unit tests in Angular with Jest

Providing global mocks for Jest

Mocking Angular services using stubs

Using spies on an injected service in a unit test

Mocking child components and directives using the ng-mocks package

Writing even easier tests with Angular CDK component harnesses

Unit-testing responses from HTTP calls

Unit-testing Angular pipes

E2E Tests in Angular with Cypress

Technical requirements

Writing your first Cypress test

Validating if a DOM element is visible on the view

Testing form inputs and submission

Waiting for XHRs to finish

Using Cypress bundled packages

Using Cypress fixtures to provide mock data

Performance Optimization in Angular

Technical requirements

Using OnPush change detection to prune component subtrees

Detaching the change detector from components

Running async events outside Angular with runOutsideAngular

Using trackBy for lists with *ngFor

Moving heavy computation to pure pipes

Using web workers for heavy computation

Using performance budgets for auditing

Analyzing bundles with webpack-bundle-analyzer

Building PWAs with Angular

Technical requirements

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

Modifying the theme color for your PWA

Using dark mode in your PWA

Providing a custom installable experience in your PWA

Precaching requests using an Angular service worker

Creating an App Shell for your PWA

Other Books You May Enjoy

Index

Customer Reviews

2.7 (3)

5 star

33.3%

4 star

3 star

2 star

33.3%

1 star

33.3%

Performance Optimization in Angular

Performance is always a concern in any product that you build for end users. It is a critical element in increasing the chances of someone using your app for the first time becoming a customer. Now, we can’t really improve an app’s performance until we identify potential possibilities for improvement and the methods to achieve this. In this chapter, you’ll learn some methods to deploy when it comes to improving Angular applications. You’ll learn how to analyze, optimize, and improve your Angular app’s performance using several techniques. Here are the recipes we’re going to cover in this chapter:

Using OnPush change detection to prune component subtrees
Detaching the change detector from components
Running async events outside Angular with runOutsideAngular
Using trackBy for lists with *ngFor
Moving heavy computation to pure pipes
Using web workers for heavy computation...

Angular Cookbook - Second Edition

By : Muhammad Ahsan Ayaz

Angular Cookbook - Second Edition

By: Muhammad Ahsan Ayaz

Overview of this book

Related Content you might be interested in

Current Title:

Angular Cookbook - Second Edition

Learning Angular, Fourth Edition

Angular Design Patterns and Best Practices

Angular Projects

Performance Optimization in Angular