book

Angular Cookbook

Name: Angular Cookbook
Author: Muhammad Ahsan Ayaz
ISBN: 9781838989439

by Muhammad Ahsan Ayaz

August 2021

Intermediate to advanced

652 pages

10h 53m

English

Packt Publishing

Read now

Unlock full access

Angular Cookbook
ForewordContributorsAbout the authorAbout the reviewer
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesDownload the color imagesConventions usedGet in touchShare Your Thoughts
Chapter 1: Winning Components Communication
Technical requirementsComponents communication using component @Input(s) and @Output(s)Getting readyHow to do it…How it works…See alsoComponents communication using servicesGetting readyHow to do it…How it works…See alsoUsing setters for intercepting input property changesGetting readyHow to do it…How it works…See alsoUsing ngOnChanges to intercept input property changesGetting readyHow to do it…How it works…See alsoAccessing a child component in the parent template via template variablesGetting readyHow to do it…How it works…See alsoAccessing a child component in a parent component class using ViewChildGetting readyHow to do it…How it works…See alsoCreating your first dynamic component in AngularGetting readyHow to do it…How it works…See also
Chapter 2: Understanding and Using Angular Directives
Technical requirementsUsing attribute directives to handle the appearance of elementsGetting readyHow to do it…How it works…See alsoCreating a directive to calculate the read time for articlesGetting readyHow to do it…How it works…See alsoCreating a basic directive that allows you to vertically scroll to an elementGetting readyHow to do it…How it works…There's more…Writing your first custom structural directiveGetting readyHow to do it…How it works…See alsoHow to use *ngIf and *ngSwitch togetherGetting readyHow to do it…How it works…See alsoEnhancing template type checking for your custom directivesGetting readyHow to do it…See also
Chapter 3: The Magic of Dependency Injection in Angular
Technical requirementsConfiguring an injector with a DI tokenGetting readyHow to do it...How it worksSee alsoOptional dependenciesGetting readyHow to do itHow it worksSee alsoCreating a singleton service using providedInGetting readyHow to do itHow it worksSee alsoCreating a singleton service using forRoot()Getting readyHow to do itHow it worksSee alsoProviding different services to the app with the same Aliased class providerGetting readyHow to do itHow it worksSee alsoValue providers in AngularGetting readyHow to do itHow it worksSee also
Chapter 4: Understanding Angular Animations
Technical requirementsCreating your first two-state Angular animationGetting readyHow to do it…How it works…There's more…See alsoWorking with multi-state animationsGetting readyHow to do it…How it works…See alsoCreating complex Angular animations using keyframesGetting readyHow to do it…How it works…See alsoAnimating lists in Angular using stagger animationsGetting readyHow to do it…How it works…See alsoUsing animation callbacksGetting readyHow to do it…How it works…See alsoBasic route animations in AngularGetting readyHow to do it…How it works…See alsoComplex route animations in Angular using keyframesGetting readyHow to do it…How it works…See also
Chapter 5: Angular and RxJS – Awesomeness Combined
Technical requirementsWorking with RxJS operators using instance methodsGetting readyHow to do it…How it works…See alsoWorking with RxJS operators using static methodsGetting readyHow to do it…How it works…See alsoUnsubscribing streams to avoid memory leaksGetting readyHow to do it…How it works…There's more…See alsoUsing an Observable with the async pipe to synchronously bind data to your Angular templatesGetting readyHow to do it…How it works…See alsoUsing combineLatest to subscribe to multiple streams togetherGetting readyHow to do it…How it works…See alsoUsing the flatMap operator to create sequential HTTP callsGetting readyHow to do it…How it works…See alsoUsing the switchMap operator to switch the last subscription with a new oneGetting readyHow to do it… How it works…See alsoDebouncing HTTP requests using RxJSGetting readyHow to do it…How it works…See also
Chapter 6: Reactive State Management with NgRx
Technical requirementsCreating your first NgRx store with actions and reducerGetting readyHow to do it…See alsoUsing @ngrx/store-devtools to debug the state changesGetting readyHow to do it…How it works…There's more…See alsoCreating an effect to fetch third-party API dataGetting readyHow to do it…How it works…See alsoUsing selectors to fetch data from stores in multiple componentsGetting readyHow to do it…How it works…See alsoUsing @ngrx/component-store for local state management within a componentGetting readyHow to do it…How it works…See alsoUsing @ngrx/router-store to work with route changes reactivelyGetting readyHow to do it…How it works…See also
Chapter 7: Understanding Angular Navigation and Routing
Technical requirementsCreating an Angular app with routes using the CLIGetting readyHow to do it…How it works…See alsoFeature modules and lazily loaded routesGetting readyHow to do it…How it works…See alsoAuthorized access to routes using route guardsGetting readyHow to do it…How it works…See alsoWorking with route parametersGetting readyHow to do it…How it works…See alsoShowing a global loader between route changesGetting readyHow to do it…How it works…See alsoPreloading route strategiesGetting readyHow to do it…How it works…See also
Chapter 8: Mastering Angular Forms
Technical requirementsCreating your first template-driven Angular formGetting readyHow to do it…How it works…See alsoForm validation with template-driven formsGetting readyHow to do it…How it works…See alsoTesting template-driven formsGetting readyHow to do it…How it works…See alsoCreating your first Reactive formGetting readyHow to do it…How it works…See alsoForm validation with Reactive formsGetting readyHow to do it…How it works…See alsoCreating an asynchronous validator functionGetting readyHow it works…See alsoTesting Reactive formsGetting readyHow to do it…How it works…See alsoUsing debounce with Reactive form controlGetting readyHow to do it…How it works…See alsoWriting your own custom form control using ControlValueAccessorGetting readyHow to do it…How it works…See also

Chapter 9: Angular and the Angular CDK
Technical requirementsUsing Virtual Scroll for huge listsGetting readyHow to do it…How it works…See alsoKeyboard navigation for listsGetting readyHow to do it…How it works…See alsoPointy little popovers with the Overlay APIGetting readyHow to do it…How it works…See alsoUsing CDK Clipboard to work with the system clipboardGetting readyHow to do it…How it works…See alsoUsing CDK Drag and Drop to move items from one list to anotherGetting readyHow to do it…How it works…See alsoCreating a multi-step game with the CDK Stepper APIGetting readyHow to do it…How it works…See alsoResizing text inputs with the CDK TextField APIGetting readyHow to do it…How it works…See also
Chapter 10: Writing Unit Tests in Angular with Jest
Technical requirementsSetting up unit tests in Angular with JestGetting readyHow to do it...See alsoProviding global mocks for JestGetting readyHow to do it...How it works...See alsoMocking services using stubsGetting readyHow to do it...How it works...See alsoUsing spies on an injected service in a unit testGetting readyHow to do it...How it works...See alsoMocking child components and directives using the ng-mocks packageGetting readyHow to do it...How it works...See alsoCreating even easier component tests with Angular CDK component harnessesGetting readyHow to do it...How it works...See alsoUnit testing components with ObservablesGetting readyHow to do it...How it works...See alsoUnit testing Angular PipesGetting readyHow to do it...See also
Chapter 11: E2E Tests in Angular with Cypress
Technical requirementsWriting your first Cypress testGetting readyHow to do it…How it works…See alsoValidating if a DOM element is visible on the viewGetting readyHow to do it…How it works…See alsoTesting form inputs and submissionGetting readyHow to do it…How it works…See alsoWaiting for XHRs to finishGetting readyHow to do it…How it works…See alsoUsing Cypress bundled packagesGetting readyHow to do it…How it works…See alsoUsing Cypress fixtures to provide mock dataGetting readyHow to do it…How it works…See also
Chapter 12: Performance Optimization in Angular
Technical requirementsUsing OnPush change detection to prune component subtreesGetting readyHow to do it…How it works…See alsoDetaching the change detector from componentsGetting readyHow to do it…How it works…See alsoRunning async events outside Angular with runOutsideAngularGetting readyHow to do it…How it works…See alsoUsing trackBy for lists with *ngForGetting readyHow to do it…How it works…See alsoMoving heavy computation to pure pipesGetting readyHow to do it…How it works…See alsoUsing web workers for heavy computationGetting readyHow to do it…How it works…See alsoUsing performance budgets for auditingGetting readyHow to do it…See alsoAnalyzing bundles with webpack-bundle-analyzerGetting readyHow to do it…See also
Chapter 13: Building PWAs with Angular
Technical requirementsConverting an existing Angular app into a PWA with the Angular CLIGetting readyHow to do itHow it worksSee alsoModifying the theme color for your PWAGetting readyHow to do itSee alsoUsing Dark Mode in your PWAGetting readyHow to do itSee alsoProviding a custom installable experience in your PWAGetting readyHow to do itHow it worksSee alsoPrecaching requests using an Angular service workerGetting readyHow to do itHow it worksSee alsoCreating an App Shell for your PWAGetting readyHow to do itHow it worksSee also
Why subscribe?
Other Books You May EnjoyPackt is searching for authors like youShare Your Thoughts

Overview

"Angular Cookbook" provides developers with over 80 problem-solving recipes to master the Angular framework. This comprehensive guide starts with foundational Angular concepts such as components and directives and progresses to advanced topics like state management and app optimization. You'll gain actionable insights to build and enhance high-quality web applications.

What this Book will help me do

Understand and effectively use Angular components, directives, and services.
Develop Progressive Web Apps with Angular, enhancing user experience.
Implement robust state management using NgRx for large-scale applications.
Increase app performance through testing and optimization techniques.
Incorporate Angular CDK components to streamline app building processes.

Author(s)

Muhammad Ahsan Ayaz is a seasoned web developer specializing in Angular technologies. With years of experience teaching and mentoring developers, Ahsan has created this book to share actionable solutions to complex Angular challenges. His practical approach ensures developers learn not only the 'how' but also the 'why' behind effective development practices.

Who is it for?

This book is tailored for intermediate-level Angular developers seeking hands-on solutions to real-world programming challenges. It's also valuable for mobile developers leveraging Angular technologies. If you have a background in JavaScript and TypeScript and are looking to deepen your Angular expertise, this book is for you.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781838989439

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills