Angular Cookbook

By : Muhammad Ahsan Ayaz

Angular Cookbook

By: Muhammad Ahsan Ayaz

Overview of this book

The Angular framework, powered by Google, is the framework of choice for many web development projects built across varying scales. It’s known to provide much-needed stability and a rich tooling ecosystem for building production-ready web and mobile apps. This recipe-based guide enables you to learn Angular concepts in depth using a step-by-step approach. You’ll explore a wide range of recipes across key tasks in web development that will help you build high-performance apps. The book starts by taking you through core Angular concepts such as Angular components, directives, and services to get you ready for building frontend web apps. You’ll develop web components with Angular and go on to cover 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 Angular book, you’ll be able to create full-fledged, professional-looking Angular apps and have the skills you need for frontend development, which are crucial for an enterprise Angular developer.

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Share Your Thoughts

Chapter 1: Winning Components Communication

Technical requirements

Components communication using component @Input(s) and @Output(s)

Components communication using services

Using setters for intercepting input property changes

Using ngOnChanges to intercept input property changes

Accessing a child component in the parent template via template variables

Accessing a child component in a parent component class using ViewChild

Creating your first dynamic component in Angular

Free Chapter

Chapter 2: Understanding and Using Angular Directives

Technical requirements

Using attribute directives to handle the appearance of elements

Creating a directive to calculate the read time for articles

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

Writing your first custom structural directive

How to use *ngIf and *ngSwitch together

Enhancing template type checking for your custom directives

Chapter 3: The Magic of Dependency Injection in Angular

Technical requirements

Configuring an injector with a DI token

Optional dependencies

Creating a singleton service using providedIn

Creating a singleton service using forRoot()

Providing different services to the app with the same Aliased class provider

Value providers in Angular

Chapter 4: 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

Using animation callbacks

Basic route animations in Angular

Complex route animations in Angular using keyframes

Chapter 5: Angular and RxJS – Awesomeness Combined

Technical requirements

Working with RxJS operators using instance methods

Working with RxJS operators using static methods

Unsubscribing streams to avoid memory leaks

Using an Observable with the async pipe to synchronously bind data to your Angular templates

Using combineLatest to subscribe to multiple streams together

Using the flatMap operator to create sequential HTTP calls

Using the switchMap operator to switch the last subscription with a new one

Debouncing HTTP requests using RxJS

Chapter 6: Reactive State Management with NgRx

Technical requirements

Creating your first NgRx store with actions and reducer

Using @ngrx/store-devtools to debug the state changes

Creating an effect to fetch third-party API data

Using selectors to fetch data from stores in multiple components

Using @ngrx/component-store for local state management within a component

Using @ngrx/router-store to work with route changes reactively

Chapter 7: Understanding Angular Navigation and Routing

Technical requirements

Creating an Angular app with routes using the CLI

Feature modules and lazily loaded routes

Authorized access to routes using route guards

Working with route parameters

Showing a global loader between route changes

Preloading route strategies

Chapter 8: Mastering Angular Forms

Technical requirements

Creating your first template-driven Angular form

Form validation with template-driven forms

Testing template-driven forms

Creating your first Reactive form

Form validation with Reactive forms

Creating an asynchronous validator function

Testing Reactive forms

Using debounce with Reactive form control

Writing your own custom form control using ControlValueAccessor

Chapter 9: Angular and the Angular CDK

Technical requirements

Using Virtual Scroll for huge lists

Keyboard navigation for lists

Pointy little popovers with the Overlay API

Using CDK Clipboard to work with the system clipboard

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

Creating a multi-step game with the CDK Stepper API

Resizing text inputs with the CDK TextField API

Chapter 10: Writing Unit Tests in Angular with Jest

Technical requirements

Setting up unit tests in Angular with Jest

Providing global mocks for Jest

Mocking services using stubs

Using spies on an injected service in a unit test

Mocking child components and directives using the ng-mocks package

Creating even easier component tests with Angular CDK component harnesses

Unit testing components with Observables

Chapter 11: 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

Chapter 12: 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

Chapter 13: 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

Why subscribe?

Other Books You May Enjoy

Packt is searching for authors like you

Share Your Thoughts

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Using @ngrx/store-devtools to debug the state changes

In this recipe, you'll learn how to set up and use @ngrx/store-devtools to debug your app's state, the actions dispatch, and the difference in the state when the actions dispatch. We'll be using an existing app we're familiar with to learn about the process.

Getting ready

The project for this recipe resides in chapter06/start_here/using-ngrx-store-devtool:

Open the project in VS Code.
Open the terminal and run npm install to install the dependencies of the project.
Once done, run ng serve -o.
This should open the app in a new browser tab.
Login as an Admin user, and you should see a screen like this:

Figure 6.4 – Using ngrx-store-devtools app running on http://localhost:4200

Now that we have the app set up, let's see the steps of the recipe in the next section.

How to do it…

We have an Angular app that already has the @ngrx/store...

Angular Cookbook

By : Muhammad Ahsan Ayaz

Angular Cookbook

By: Muhammad Ahsan Ayaz

Overview of this book

Related Content you might be interested in

Current Title:

Angular Cookbook

Learning Angular

Learning Angular

Building Modern Web Applications Using Angular 4

Using @ngrx/store-devtools to debug the state changes

Getting ready

How to do it…