Ayaz M. Angular Cookbook. Over 80 actionable recipes.2021

Components communication using @Component inputs and outputs
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 

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

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
Value providers in Angular 

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

Working with RxJS operators using instance methods
Working with RxJS operators using static methods
Unsubscribing streams to avoidmemory 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

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

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

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

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

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
Unit testing Angular Pipes

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

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

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

Comments ( )