Angular Cookbook: Over 80 actionable recipes every Angular developer should know

source url Angular Cookbook Foreword Contributors About the author About the reviewer 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) Getting ready How to do it… How it works… See also Components 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 the 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 Creating your first dynamic component in Angular Getting ready How to do it… How it works… See also Chapter 2: Understanding and Using Angular Directives 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 basic directive that allows you to vertically scroll to an element Getting ready How to do it… How it works… There's more… Writing your first custom structural directive Getting ready How to do it… How it works… See also How to use *ngIf and *ngSwitch together Getting ready How to do it… How it works… See also Enhancing template type checking for your custom directives Getting ready How to do it… See also Chapter 3: The Magic of Dependency Injection in Angular Technical requirements Configuring an injector with a DI token 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 different services to the app with the same Aliased class provider Getting ready How to do it How it works See also Value providers in Angular Getting ready How to do it How it works See also Chapter 4: Understanding Angular Animations Technical requirements Creating your first two-state Angular animation Getting ready How to do it… How it works… There's more… 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 Using animation callbacks Getting ready How to do it… How it works… See also Basic route animations in Angular Getting ready How to do it… How it works… See also Complex route animations in Angular using keyframes Getting ready How to do it… How it works… See also Chapter 5: Angular and RxJS – Awesomeness Combined Technical requirements Working with RxJS operators using instance methods Getting ready How to do it… How it works… See also Working with RxJS operators using static methods 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 an Observable with the async pipe to synchronously bind data to your Angular templates Getting ready How to do it… How it works… See also Using combineLatest to subscribe to multiple streams together Getting ready How to do it… How it works… See also Using the flatMap operator to create sequential HTTP calls Getting ready How to do it… How it works… See also Using the switchMap operator to switch the last subscription with a new one Getting ready How to do it… How it works… See also Debouncing HTTP requests using RxJS Getting ready How to do it… How it works… See also Chapter 6: Reactive State Management with NgRx Technical requirements Creating your first NgRx store with actions and reducer Getting ready How to do it… See also Using @ngrx/store-devtools to debug the state changes Getting ready How to do it… How it works… There's more… See also Creating an effect to fetch third-party API data Getting ready How to do it… How it works… See also Using selectors to fetch data from stores in multiple components Getting ready How to do it… How it works… See also Using @ngrx/component-store for local state management within a component Getting ready How to do it… How it works… See also Using @ngrx/router-store to work with route changes reactively Getting ready How to do it… How it works… See also Chapter 7: Understanding Angular Navigation and Routing Technical requirements Creating an Angular app with routes using the CLI Getting ready How to do it… How it works… See also Feature modules and lazily loaded routes 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 Preloading route strategies Getting ready How to do it… How it works… See also Chapter 8: Mastering Angular Forms Technical requirements Creating your first template-driven Angular form Getting ready How to do it… How it works… See also Form validation with template-driven forms Getting ready How to do it… How it works… See also Testing template-driven forms Getting ready How to do it… How it works… See also Creating your first Reactive form Getting ready How to do it… How it works… See also Form validation with Reactive forms Getting ready How to do it… How it works… See also Creating an asynchronous validator function Getting ready How it works… See also Testing Reactive forms Getting ready How to do it… How it works… See also Using debounce with Reactive form control 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 Chapter 9: 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 Using CDK Clipboard to work with the system clipboard Getting ready How to do it… How it works… See also Using CDK Drag and Drop 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 Resizing text inputs with the CDK TextField API Getting ready How to do it… How it works… See also Chapter 10: Writing Unit Tests in Angular with Jest Technical requirements Setting up unit tests in Angular with Jest Getting ready How to do it... See also Providing global mocks for Jest Getting ready How to do it... How it works... See also Mocking 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 Creating even easier component tests with Angular CDK component harnesses Getting ready How to do it... How it works... See also Unit testing components with Observables Getting ready How to do it... How it works... See also Unit testing Angular Pipes Getting ready How to do it... See also Chapter 11: 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 Chapter 12: 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… See also Analyzing bundles with webpack-bundle-analyzer Getting ready How to do it… See also Chapter 13: 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 Why subscribe? Other Books You May Enjoy Packt is searching for authors like you Share Your Thoughts