Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Angular Cookbook
  • Toc
  • feedback
Angular Cookbook

Angular Cookbook

By : Muhammad Ahsan Ayaz
4.4 (14)
close
Angular Cookbook

Angular Cookbook

4.4 (14)
By: Muhammad Ahsan Ayaz

Overview of this book

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.
Table of Contents (15 chapters)
close
close
Preface
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
1
Chapter 1: Winning Components Communication
Chapter 1: Winning Components Communication
Technical requirements
Components communication using component @Input(s) and @Output(s)
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
Free Chapter
2
Chapter 2: Understanding and Using Angular Directives
Chapter 2: Understanding and Using Angular Directives
Technical requirements
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
3
Chapter 3: The Magic of Dependency Injection in Angular
Chapter 3: The Magic of Dependency Injection in Angular
Technical requirements
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 class provider
Value providers in Angular
4
Chapter 4: Understanding Angular Animations
chevron up
Chapter 4: Understanding Angular Animations
Technical requirements
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
5
Chapter 5: Angular and RxJS – Awesomeness Combined
Chapter 5: Angular and RxJS – Awesomeness Combined
Technical requirements
Working with RxJS operators using instance methods
Working with RxJS operators using static methods
Unsubscribing streams to avoid memory 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
6
Chapter 6: Reactive State Management with NgRx
Chapter 6: Reactive State Management with NgRx
Technical requirements
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
7
Chapter 7: Understanding Angular Navigation and Routing
Chapter 7: Understanding Angular Navigation and Routing
Technical requirements
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
8
Chapter 8: Mastering Angular Forms
Chapter 8: Mastering Angular Forms
Technical requirements
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
9
Chapter 9: Angular and the Angular CDK
Chapter 9: Angular and the Angular CDK
Technical requirements
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
10
Chapter 10: Writing Unit Tests in Angular with Jest
Chapter 10: Writing Unit Tests in Angular with Jest
Technical requirements
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
11
Chapter 11: E2E Tests in Angular with Cypress
Chapter 11: E2E Tests in Angular with Cypress
Technical requirements
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
12
Chapter 12: Performance Optimization in Angular
Chapter 12: Performance Optimization in Angular
Technical requirements
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
13
Chapter 13: Building PWAs with Angular
Chapter 13: Building PWAs with Angular
Technical requirements
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
Why subscribe?
14
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts

Using animation callbacks

In this recipe, you'll learn how to be notified and act upon animation state changes in Angular. As a simple example, we'll use the same bucket list app, and we'll reset the item-to-add option whenever the animation completes for adding an item.

Getting ready

The project that we are going to work with resides in chapter04/start_here/animation-callbacks inside the cloned repository:

  1. Open the project in Visual Studio Code.
  2. Open the terminal and run npm install to install the dependencies of the project.
  3. Once done, run ng serve -o.

    This should open the app in a new browser tab.

  4. Click the Login as Admin button, and you should see something like the following:

Figure 4.6 – animation-callbacks app running on http://localhost:4200

Now that we have the app running locally, let's see the steps of the recipe in the next section.

How to do it…

We have the same bucket app...

End of Section 7
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete