Cover image for Angular Cookbook

Angular Cookbook

Release Date: 2021/08/01
ISBN: 9781838989439
Topic:
0%
18
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Discover actionable solutions to everyday problems in building applications with Angular and TypeScript, from app design to production deployment

Key Features

  • Explore recipes across core Angular topics to fill gaps in your knowledge of using Angular in production
  • Discover industry best practices and tooling to enhance your development experience with Angular
  • Understand advanced topics in Angular to help you become a proficient enterprise web developer

Book Description

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.

What you will learn

  • Gain a better understanding of how components, services, and directives work in Angular
  • Understand how to create Progressive Web Apps using Angular from scratch
  • Build rich animations and add them to your Angular apps
  • Manage your app's data reactivity using RxJS
  • Implement state management for your Angular apps with NgRx
  • Optimize the performance of your new and existing web apps
  • Write fail-safe unit tests and end-to-end tests for your web apps using Jest and Cypress
  • Get familiar with Angular CDK components for designing effective Angular components

Who this book is for

The book is for intermediate-level Angular web developers looking for actionable solutions to common problems in Angular enterprise development. Mobile developers using Angular technologies will also find this book useful. Working experience with JavaScript and TypeScript is necessary to understand the topics covered in this book more effectively.

Table of Contents

  1. Angular Cookbook
  2. Foreword
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  7. Chapter 1: Winning Components Communication
    1. Technical requirements
    2. Components communication using component @Input(s) and @Output(s)
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. See also
    7. Components communication using services
    8. Getting ready
    9. How to do it…
    10. How it works…
    11. See also
    12. Using setters for intercepting input property changes
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. See also
    17. Using ngOnChanges to intercept input property changes
    18. Getting ready
    19. How to do it…
    20. How it works…
    21. See also
    22. Accessing a child component in the parent template via template variables
    23. Getting ready
    24. How to do it…
    25. How it works…
    26. See also
    27. Accessing a child component in a parent component class using ViewChild
    28. Getting ready
    29. How to do it…
    30. How it works…
    31. See also
    32. Creating your first dynamic component in Angular
    33. Getting ready
    34. How to do it…
    35. How it works…
    36. See also
  8. Chapter 2: Understanding and Using Angular Directives
    1. Technical requirements
    2. Using attribute directives to handle the appearance of elements
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. See also
    7. Creating a directive to calculate the read time for articles
    8. Getting ready
    9. How to do it…
    10. How it works…
    11. See also
    12. Creating a basic directive that allows you to vertically scroll to an element
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. There's more…
    17. Writing your first custom structural directive
    18. Getting ready
    19. How to do it…
    20. How it works…
    21. See also
    22. How to use *ngIf and *ngSwitch together
    23. Getting ready
    24. How to do it…
    25. How it works…
    26. See also
    27. Enhancing template type checking for your custom directives
    28. Getting ready
    29. How to do it…
    30. See also
  9. Chapter 3: The Magic of Dependency Injection in Angular
    1. Technical requirements
    2. Configuring an injector with a DI token
    3. Getting ready
    4. How to do it...
    5. How it works
    6. See also
    7. Optional dependencies
    8. Getting ready
    9. How to do it
    10. How it works
    11. See also
    12. Creating a singleton service using providedIn
    13. Getting ready
    14. How to do it
    15. How it works
    16. See also
    17. Creating a singleton service using forRoot()
    18. Getting ready
    19. How to do it
    20. How it works
    21. See also
    22. Providing different services to the app with the same Aliased class provider
    23. Getting ready
    24. How to do it
    25. How it works
    26. See also
    27. Value providers in Angular
    28. Getting ready
    29. How to do it
    30. How it works
    31. See also
  10. Chapter 4: Understanding Angular Animations
    1. Technical requirements
    2. Creating your first two-state Angular animation
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. There's more…
    7. See also
    8. Working with multi-state animations
    9. Getting ready
    10. How to do it…
    11. How it works…
    12. See also
    13. Creating complex Angular animations using keyframes
    14. Getting ready
    15. How to do it…
    16. How it works…
    17. See also
    18. Animating lists in Angular using stagger animations
    19. Getting ready
    20. How to do it…
    21. How it works…
    22. See also
    23. Using animation callbacks
    24. Getting ready
    25. How to do it…
    26. How it works…
    27. See also
    28. Basic route animations in Angular
    29. Getting ready
    30. How to do it…
    31. How it works…
    32. See also
    33. Complex route animations in Angular using keyframes
    34. Getting ready
    35. How to do it…
    36. How it works…
    37. See also
  11. Chapter 5: Angular and RxJS – Awesomeness Combined
    1. Technical requirements
    2. Working with RxJS operators using instance methods
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. See also
    7. Working with RxJS operators using static methods
    8. Getting ready
    9. How to do it…
    10. How it works…
    11. See also
    12. Unsubscribing streams to avoid memory leaks
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. There's more…
    17. See also
    18. Using an Observable with the async pipe to synchronously bind data to your Angular templates
    19. Getting ready
    20. How to do it…
    21. How it works…
    22. See also
    23. Using combineLatest to subscribe to multiple streams together
    24. Getting ready
    25. How to do it…
    26. How it works…
    27. See also
    28. Using the flatMap operator to create sequential HTTP calls
    29. Getting ready
    30. How to do it…
    31. How it works…
    32. See also
    33. Using the switchMap operator to switch the last subscription with a new one
    34. Getting ready
    35. How to do it…
    36. How it works…
    37. See also
    38. Debouncing HTTP requests using RxJS
    39. Getting ready
    40. How to do it…
    41. How it works…
    42. See also
  12. Chapter 6: Reactive State Management with NgRx
    1. Technical requirements
    2. Creating your first NgRx store with actions and reducer
    3. Getting ready
    4. How to do it…
    5. See also
    6. Using @ngrx/store-devtools to debug the state changes
    7. Getting ready
    8. How to do it…
    9. How it works…
    10. There's more…
    11. See also
    12. Creating an effect to fetch third-party API data
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. See also
    17. Using selectors to fetch data from stores in multiple components
    18. Getting ready
    19. How to do it…
    20. How it works…
    21. See also
    22. Using @ngrx/component-store for local state management within a component
    23. Getting ready
    24. How to do it…
    25. How it works…
    26. See also
    27. Using @ngrx/router-store to work with route changes reactively
    28. Getting ready
    29. How to do it…
    30. How it works…
    31. See also
  13. Chapter 7: Understanding Angular Navigation and Routing
    1. Technical requirements
    2. Creating an Angular app with routes using the CLI
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. See also
    7. Feature modules and lazily loaded routes
    8. Getting ready
    9. How to do it…
    10. How it works…
    11. See also
    12. Authorized access to routes using route guards
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. See also
    17. Working with route parameters
    18. Getting ready
    19. How to do it…
    20. How it works…
    21. See also
    22. Showing a global loader between route changes
    23. Getting ready
    24. How to do it…
    25. How it works…
    26. See also
    27. Preloading route strategies
    28. Getting ready
    29. How to do it…
    30. How it works…
    31. See also
  14. Chapter 8: Mastering Angular Forms
    1. Technical requirements
    2. Creating your first template-driven Angular form
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. See also
    7. Form validation with template-driven forms
    8. Getting ready
    9. How to do it…
    10. How it works…
    11. See also
    12. Testing template-driven forms
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. See also
    17. Creating your first Reactive form
    18. Getting ready
    19. How to do it…
    20. How it works…
    21. See also
    22. Form validation with Reactive forms
    23. Getting ready
    24. How to do it…
    25. How it works…
    26. See also
    27. Creating an asynchronous validator function
    28. Getting ready
    29. How it works…
    30. See also
    31. Testing Reactive forms
    32. Getting ready
    33. How to do it…
    34. How it works…
    35. See also
    36. Using debounce with Reactive form control
    37. Getting ready
    38. How to do it…
    39. How it works…
    40. See also
    41. Writing your own custom form control using ControlValueAccessor
    42. Getting ready
    43. How to do it…
    44. How it works…
    45. See also
  15. Chapter 9: Angular and the Angular CDK
    1. Technical requirements
    2. Using Virtual Scroll for huge lists
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. See also
    7. Keyboard navigation for lists
    8. Getting ready
    9. How to do it…
    10. How it works…
    11. See also
    12. Pointy little popovers with the Overlay API
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. See also
    17. Using CDK Clipboard to work with the system clipboard
    18. Getting ready
    19. How to do it…
    20. How it works…
    21. See also
    22. Using CDK Drag and Drop to move items from one list to another
    23. Getting ready
    24. How to do it…
    25. How it works…
    26. See also
    27. Creating a multi-step game with the CDK Stepper API
    28. Getting ready
    29. How to do it…
    30. How it works…
    31. See also
    32. Resizing text inputs with the CDK TextField API
    33. Getting ready
    34. How to do it…
    35. How it works…
    36. See also
  16. Chapter 10: Writing Unit Tests in Angular with Jest
    1. Technical requirements
    2. Setting up unit tests in Angular with Jest
    3. Getting ready
    4. How to do it...
    5. See also
    6. Providing global mocks for Jest
    7. Getting ready
    8. How to do it...
    9. How it works...
    10. See also
    11. Mocking services using stubs
    12. Getting ready
    13. How to do it...
    14. How it works...
    15. See also
    16. Using spies on an injected service in a unit test
    17. Getting ready
    18. How to do it...
    19. How it works...
    20. See also
    21. Mocking child components and directives using the ng-mocks package
    22. Getting ready
    23. How to do it...
    24. How it works...
    25. See also
    26. Creating even easier component tests with Angular CDK component harnesses
    27. Getting ready
    28. How to do it...
    29. How it works...
    30. See also
    31. Unit testing components with Observables
    32. Getting ready
    33. How to do it...
    34. How it works...
    35. See also
    36. Unit testing Angular Pipes
    37. Getting ready
    38. How to do it...
    39. See also
  17. Chapter 11: E2E Tests in Angular with Cypress
    1. Technical requirements
    2. Writing your first Cypress test
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. See also
    7. Validating if a DOM element is visible on the view
    8. Getting ready
    9. How to do it…
    10. How it works…
    11. See also
    12. Testing form inputs and submission
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. See also
    17. Waiting for XHRs to finish
    18. Getting ready
    19. How to do it…
    20. How it works…
    21. See also
    22. Using Cypress bundled packages
    23. Getting ready
    24. How to do it…
    25. How it works…
    26. See also
    27. Using Cypress fixtures to provide mock data
    28. Getting ready
    29. How to do it…
    30. How it works…
    31. See also
  18. Chapter 12: Performance Optimization in Angular
    1. Technical requirements
    2. Using OnPush change detection to prune component subtrees
    3. Getting ready
    4. How to do it…
    5. How it works…
    6. See also
    7. Detaching the change detector from components
    8. Getting ready
    9. How to do it…
    10. How it works…
    11. See also
    12. Running async events outside Angular with runOutsideAngular
    13. Getting ready
    14. How to do it…
    15. How it works…
    16. See also
    17. Using trackBy for lists with *ngFor
    18. Getting ready
    19. How to do it…
    20. How it works…
    21. See also
    22. Moving heavy computation to pure pipes
    23. Getting ready
    24. How to do it…
    25. How it works…
    26. See also
    27. Using web workers for heavy computation
    28. Getting ready
    29. How to do it…
    30. How it works…
    31. See also
    32. Using performance budgets for auditing
    33. Getting ready
    34. How to do it…
    35. See also
    36. Analyzing bundles with webpack-bundle-analyzer
    37. Getting ready
    38. How to do it…
    39. See also
  19. Chapter 13: Building PWAs with Angular
    1. Technical requirements
    2. Converting an existing Angular app into a PWA with the Angular CLI
    3. Getting ready
    4. How to do it
    5. How it works
    6. See also
    7. Modifying the theme color for your PWA
    8. Getting ready
    9. How to do it
    10. See also
    11. Using Dark Mode in your PWA
    12. Getting ready
    13. How to do it
    14. See also
    15. Providing a custom installable experience in your PWA
    16. Getting ready
    17. How to do it
    18. How it works
    19. See also
    20. Precaching requests using an Angular service worker
    21. Getting ready
    22. How to do it
    23. How it works
    24. See also
    25. Creating an App Shell for your PWA
    26. Getting ready
    27. How to do it
    28. How it works
    29. See also
    30. Why subscribe?
  20. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts