Angular Cookbook, Second Edition: Over 80 actionable recipes for curious Angular developers

Welcome to Packt Early Access. We’re giving you an exclusive preview of this book before it goes on sale. It can take many months to write a book, but our authors have cutting-edge information to share with you today. Early Access gives you an insight into the latest developments by making chapter drafts available. The chapters may be a little rough around the edges right now, but our authors will update them over time.You can dip in and out of this book or follow along from start to finish; Early Access is designed to be flexible. We hope you enjoy getting to know more about the process of writing a Packt book.

1. Chapter 1: Winning Components Communication
2. Chapter 2: Understanding and Using Angular Directives
3. Chapter 3: The magic of dependency injection in Angular
4. Chapter 4: Understanding Angular Animations
5. Chapter 5: Angular and RxJs - Awesomeness Combined
6. Chapter...

Technical requirements

For the recipes in this chapter, ensure your setup is complete as per the 'Technical Requirements' in the 'Angular-Cookbook-2E' GitHub repository. For setup details, visit: https://github.com/PacktPublishing/Angular-Cookbook-2E/tree/main/docs/technical-requirements.md. The starter code for this chapter is located at https://github.com/PacktPublishing/Angular-Cookbook-2E/tree/main/start/apps/chapter01.

Component communication using component @Input and @Output properties

You’ll start with an app with a parent component and two child components. You’ll then use Angular @Input and @Output decorators to establish communication between them using attributes and EventEmitter(s). The flow of the communication is shown in Figure 1.1.

Figure 1.1: Communication flow using @Input() and @Output() properties

Getting ready

The app that we are going to work with resides in start/apps/chapter01/cc-inputs-outputs inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-inputs-outputs
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 1.2: The cc-inputs-outputs app running on http://localhost:4200

How to do it…

So far...

Component communication using services

In this recipe, you’ll start with an app with a parent component and a child component. You’ll then use an Angular service to establish communication between them. We’re going to use BehaviorSubject and Observable streams to communicate between components and the service.

Getting ready

The project for this recipe resides in start/apps/chapter01/cc-services:

1. Open the project in Visual Studio Code.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-services
   

   This should open the app in a new browser tab, and you should see the app as follows:

   

   Figure 1.4: The cc-services app running on http://localhost:4200

How to do it…

Similar to the previous recipe, we have an app with AppComponent, NotificationsButtonComponent, and NotificationsManagerComponent. AppComponent is the parent...

Using setters for intercepting input property changes

In this recipe, you will learn how to intercept changes in an @Input passed from a parent component and how to perform some action on this event. We’ll intercept the vName input passed from the VersionControlComponent parent component to the VcLogsComponent child component. We’ll use setters to generate a log whenever the value of vName changes and will show those logs in the child component.

Getting ready

The project for this recipe resides in start/apps/chapter01/cc-setters:

1. Open the project in Visual Studio Code.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-setters
   

   This should open the app in a new browser tab, and you should see the app as follows:

   

   Figure 1.6: The cc-setters app running on http://localhost:4200

How to do it…

1. We’ll first create...

Using ngOnChanges to intercept input property changes

In this recipe, you’ll learn how to use ngOnChanges to intercept changes using the SimpleChanges API. We’ll listen to a vName input passed from the VersionControlComponent parent component to the VcLogsComponent child component.

Getting ready

The app that we are going to work with resides in start/apps/chapter01/cc-ng-on-changes inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-ng-on-changes
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 1.10: The cc-ng-on-changes app running on http://localhost:4200

How to do it…

1. We’ll first create a logs array in VcLogsComponent as follows to store all the logs that we’ll display later using...

Accessing a child component in a parent template via template variables

In this recipe, you’ll learn how to use Angular template reference variables to access a child component in the parent component’s template. You’ll start with an app having AppComponent as the parent component and GalleryComponent as the child component. You’ll then create a template variable for the child component in the parent’s template to access it and perform some actions in the component class.

Getting ready

The app that we are going to work with resides in start/apps/chapter01/cc-template-vars inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-template-vars
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 1.14: The cc-template...

Accessing a child component in a parent component class using ViewChild

In this recipe, you’ll learn how to use the ViewChild decorator to access a child component in a parent component’s class. You’ll start with an app that has AppComponent as the parent component and GalleryComponent as the child component. You’ll then create a ViewChild for the child component in the parent’s component class to access it and perform some actions.

Getting ready

The project that we are going to work with resides in chapter01/start_here/cc-view-child inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-view-child to serve the project.
   

   This should open the app in a new browser tab, and you should see something like the following:

   

   Figure 1.16: The cc-view-child...

Standalone components and passing data through route params

In this recipe, we’ll learn how to work with standalone components and how to pass some data using route parameters to other components. Note that this is not limited to standalone components and can be achieved with regular components as well. The app’s starter code gives us a list view of some users. Our task is to implement the details view using the route parameters.

Getting ready

The project that we are going to work with resides in start/apps/cc-standalone-components inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-standalone-components
   

   You should be able to see the app as follows:

   

   Figure 1.17: Users list is shown for the app cc-standalone-components

How to do it…

1. Create...

Component communication using signals

Signals are a powerful addition in the Angular ecosystem. They are also more efficient than regular Angular class properties because when you change the value of a signal, Angular will only notify the components that are subscribed to that signal to run the change detection. This can improve the performance of your application, especially if there are many components that are subscribed to the signal. In this recipe, we will work with Angular Signals to achieve a few interesting results. We will show the number of the finished tasks against total tasks. And we will show a message when all tasks are completed. Let’s do this!

Getting ready

The app that we are going to work with resides in start/apps/chapter01/ng-cc-signals inside the cloned repository. Perform the following steps to get started:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the...