Angular Cookbook : Over 80 Actionable Recipes Every Angular Developer Should Know

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 Winning Components Communication Understanding and using Angular Directives The Magic of Dependency Injection in Angular Understanding Angular Animations Angular and RxJS – Awesomeness Combined Reactive State Management with NgRx Understanding Angular Navigation and Routing Mastering Angular Forms Angular and the Angular CDK Writing Unit Tests in Angular with Jest E2E Tests in Angular with Cypress Performance Optimizations in Angular Building PWAs with Angular Cover Title page Copyright and Credits, Dedication Foreword Contributors Table of Contents Preface Chapter 1: Winning Components Communication Technical requirements Components communication using @Component inputs and outputs 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 Index Revised and updated second edition of the bestselling hands-on guide to building enterprise-ready web apps using an evergreen Angular platformKey FeaturesUpdated examples, projects, and a new overview of tools – including NgRX and Ivy, automated testing, and Firebase authenticationNew chapter summarizing history of web frameworks and Angular version updatesAll-new RESTful API implementation leveraging the MEAN stack with MongoDB, Express.js, Angular and Node.jsBook DescriptionThis second edition of Angular for Enterprise-Ready Web Applications is updated with in-depth coverage of the evergreen Angular platform. You'll start by mastering Angular programming fundamentals. Using the Kanban method and GitHub tools, you'll build great-looking apps with Angular Material and also leverage reactive programming patterns with RxJS, discover the flux pattern with NgRx, become familiar with automated testing, utilize continuous integration using CircleCI, and deploy your app to the cloud using Vercel Now and GCloud. You will then learn how to design and develop line-of-business apps using router-first architecture with observable data anchors, demonstrated through oft-used recipes like master/detail views, and data tables with pagination and forms. Next, you'll discover robust authentication and authorization design demonstrated via integration with Firebase, API documentation using Swagger, and API implementation using the MEAN stack. Finally, you will learn about DevOps using Docker, build a highly available cloud infrastructure on AWS, capture user behavior with Google Analytics, and perform load testing. By the end of the book, you'll be familiar with the entire gamut of modern web development and full-stack architecture, learning patterns and practices to be successful as an individual developer on the web or as a team in the enterprise.What you will learnAdopt a minimalist, value-first approach to delivering web appsMaster Angular development fundamentals, RxJS, CLI tools, GitHub, and DockerDiscover the flux pattern and NgRxImplement a RESTful APIs using Node.js, Express.js, and MongoDBCreate secure and efficient web apps for any cloud provider or your own serversDeploy your app on highly available cloud infrastructure using DevOps, CircleCI, and AWSWho this book is forThis book is for developers who want to confidently deliver high-quality and production-grade Angular apps from design to deployment. Developers that have prior experience in writing a RESTful APIs will also benefit, as well as developers who will gain greater awareness of how they fit into the larger picture of delivering a web application. Prior experience with RESTful APIs is desired. **Discover actionable solutions to everyday problems in building applications with Angular and TypeScript, from app design to production deployment** * 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 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. 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. * 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 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. 1. Winning Components Communication 2. Understanding and using Angular Directives 3. The Magic of Dependency Injection in Angular 4. Understanding Angular Animations 5. Angular and RxJS – Awesomeness Combined 6. Reactive State Management with NgRx 7. Understanding Angular Navigation and Routing 8. Mastering Angular Forms 9. Angular and the Angular CDK 10. Writing Unit Tests in Angular with Jest 11. E2E Tests in Angular with Cypress 12. Performance Optimizations in Angular 13. Building PWAs with Angular Revised and updated second edition of the bestselling hands-on guide to building enterprise-ready web apps using an evergreen Angular platform Key Features Updated examples, projects, and a new overview of tools - including NgRX and Ivy, automated testing, and Firebase authentication New chapter summarizing history of web frameworks and Angular version updates All-new RESTful API implementation leveraging the MEAN stack with MongoDB, Express.js, Angular and Node.js Book Description This second edition of Angular for Enterprise-Ready Web Applications is updated with in-depth coverage of the evergreen Angular platform. You'll start by mastering Angular programming fundamentals. Using the Kanban method and GitHub tools, you'll build great-looking apps with Angular Material and also leverage reactive programming patterns with RxJS, discover the flux pattern with NgRx, become familiar with automated testing, utilize continuous integration using CircleCI, and deploy your app to the cloud using Vercel Now and GCloud. You will then learn how to design and develop line-of-business apps using router-first architecture with observable data anchors, demonstrated through oft-used recipes like master/detail views, and data tables with pagination and forms. Next, you'll discover robust authentication and authorization design demonstrated via integration with Firebase, API documentation using Swagger, and API implementation using the MEAN stack. Finally, you will learn about DevOps using Docker, build a highly available cloud infrastructure on AWS, capture user behavior with Google Analytics, and perform load testing. By the end of the book, you'll be familiar with the entire gamut of modern web development and full-stack architecture, learning patterns and practices to be successful as an individual developer on the web or as a team in the enterprise. What you will learn Adopt a minimalist, value-first approach to delivering web apps Master Angular development fundamentals, RxJS, CLI tools, GitHub, and Docker Discover the flux pattern and NgRx Implement a RESTful APIs using Node.js, Express.js, and MongoDB Create secure and efficient web apps for any cloud provider or your own servers Deploy your app on highly available cloud infrastructure using DevOps, CircleCI, and AWS Who this book is for This book is for developers who want to confidently deliver high-quality and production-grade Angular apps from design to deployment. Developers that have prior experie .. Understand Angular web application development by building captivating real-world applications while exploring modern web technologies and best practices Key Features Explore Angular's capabilities for building applications across different platforms Combine popular web technologies with Angular such as monorepo, Jamstack, and PWA Build your own libraries and schematics using Angular CDK and Angular CLI Book Description Angular is a popular JavaScript framework that can run on a broad range of platforms including web, desktop, and mobile. It has an array of rich features right out of the box and a wide range of tools that makes it popular among developers. This updated second edition of Angular Projects will teach you how to build efficient and optimized web applications using Angular. You will start by exploring the essential features of the framework by creating ten different real-world web applications. Each application will demonstrate how to integrate Angular with a different library and tool. As you advance, you will understand how to implement popular technologies such as Angular Router, Scully, Electron, Angular service worker, Nx monorepo tools, NgRx, and more while building an issue tracking system, a PWA weather application, a mobile photo geotagging application, a component UI library, and many other exciting projects. Toward the concluding chapters, you'll get to grips with customizing Angular CLI commands using schematics. By the end of this book, you will have the skills you need to be able to build Angular apps using a variety of different technologies according to your or your client's needs. What you will learn Set up Angular applications using Angular CLI and Nx Console Create a personal blog with Jamstack and SPA techniques Build desktop applications with Angular and Electron Enhance user experience (UX) in offline mode with PWA techniques Make web pages SEO-friendly with server-side rendering Create a monorepo application using Nx tools and NgRx for state management Focus on mobile application development using Ionic Develop custom schematics by extending Angular CLI Who this book is for If you are a developer who has beginner-level experience with Angular and are looking to become well-versed with essential tools and deal with the various use cases you may encounter with Angular, then this Angular development book is for you. Beginner-level knowledge of web application development and basic experience working with ES6 or .. "Angular is a powerful web framework that helps teams build robust scalable applications. Angular continues to evolve but the core values remain the same: build a platform developers love to use, enable developers to build applications that users love to use, and have a community where everyone feels welcomed. Angular Projects is a book that embraces these values and takes a unique approach to empower new and experienced developers to build great applications using Angular. Aristeidis uses a project-driven approach to help learners understand modern Angular techniques in an intriguing and accessible way. This guide will help learners to build their first application with the powerful Angular CLI, take advantage of Angular's strong PWA integration, build performant static applications with Scully, and more. This book will add significant value to developers looking to get the most out of their Angular experience. As Angular continues to power incredible experiences inside Google and across the web this book will serve as an excellent learning resource for developers looking to build great apps." -- Mark Thompson, Angular Team at Google Angular is among the most popular frontend web frameworks and mastering it opens up many opportunities for a career in web development. With over 90 recipes, this book focuses on the core concepts of Angular, starting from web components and directives and gradually progressing to more advanced topics such as building animations and adding tests.