Angular Component Communication

Course Overview
Hello. My name is Deborah Kurata. Welcome to my course, Angular Component Communication from Pluralsight. When building real world Angular applications, you need effective solutions for tracking and sharing state and sending notifications between components. This course presents numerous communication techniques and, more importantly, which technique to use when. You'll see ways for a component to communicate with its template, including binding, getters and setters, input and output properties, and the ViewChild and ViewChildren decorators. You'll examine how to build services as an intermediary for communication between components and how to broadcast notifications from services using Subject or BehaviorSubject. Router components provide additional communication techniques including required, optional, and query parameters. By the end of this course, you'll have a deeper understanding of the many different ways for component communication so you can apply the most effective techniques for your application. I hope you'll join me on this journey through Angular Component Communication from Pluralsight.

Communicating with a Template
Every component has a template, and to display data or interact with the user, the component needs to communicate with that template. Welcome back to Angular Component Communication from Pluralsight. My name is Deborah Kurata, and in this module, we examine several techniques for communicating between a component and its template. Our component's first attempts at communication were most likely with its associated template. Early on we learn how to use binding to pass information to and receive events from the template and how to use structural directives to control which elements appear within the template. Here again is our component communication diagram from the prior module. Our focus in this module is on communication between a component and basic elements in its template, such as the input element shown here. In this module, we start with a quick review of binding and structural directives. Then we cover other ways of communicating between a component and input elements on its template, including two-way binding, the long way, and the very powerful but underutilized getters and setters. We'll look at more advanced techniques, including the ViewChild decorator, in the next module. Now, let's get started.

ViewChild and ViewChildren
A component can obtain a reference to an element or directive on a template and access it directly. Welcome back to Angular Component Communication from Pluralsight. My name is Deborah Kurata, and in this module, we examine the ViewChild and ViewChildren decorators for communicating between a component and its template. Our components sometimes just want to get a hold of an element in the template and interact with it. That's the purpose of the ViewChild and ViewChildren decorators. Here again is our component communication diagram. Our focus in this module is still between a component and its template, but now we'll use ViewChild and ViewChildren to get a direct reference to an element or directive. In this module, we start with an overview of the ViewChild decorator and see how to use it to communicate between a component and a native element on its template. We examine ViewChildren to obtain a reference to multiple elements. Then we pick up from where we left off in the last module and look at how to use the ViewChild decorator to communicate between a component and an input element using an Angular forms directive and the valueChanges observable. Lastly, ViewChild has a bit of an issue when using ngIf. We'll take a look at that issue and how to resolve it. Let's get started.

Communicating with a Parent Component
In the last module, we built a child component and walked through several techniques a parent component can use to communicate with that child. Now we'll look at communicating in the other direction. Welcome back to Angular Component Communication from Pluralsight. My name is Deborah Kurata, and in this module, we examine how a child communicates with its parent. With any healthy parent and child relationship, it is not only important for the parent to communicate with a child, but also for a parent to listen for information from that child. Here once again is our component communication diagram. Our focus in this module is on the communication from a child component to its parent. In this module, we look at several techniques for communicating between a child component and its parent, then focus in on output properties. Let's get started.

Communicating Through a Service
Services are a great intermediary for communication between components. Welcome back to Angular Component Communication from Pluralsight. My name is Deborah Kurata, and in these next three modules, we examine techniques for communicating through a service. Sometimes we need a component to talk to itself. Well, not quite like that. Other times we need a component to talk to its peers. Well, not quite like that either. How does a service help a component talk to itself or its peers? In this context, we can think of a service as a box. A component can put something into the box and get it out later, thereby communicating that information to itself. Why would we want to do that? We'll answer that question in this module. We can also use a service to communicate between multiple components. A component can drop a value into the box, and any other components can retrieve or update that value. Bottom line, we use a service as a mechanism for storing data or state, thereby communicating that state with other components. In this module, we look at what state means and several techniques for managing state in an application. We then examine how to set up a service as a property bag. A component can use that property bag to communicate with itself or any other component in the application. Lastly, we look at service scope and lifetime which affects which components can access the service and when. Let's get started.

Communicating Through a State Management Service
Sometimes we need a service to be more than a bag of properties. We need it to retrieve, manage, store, and share our application's state. Welcome back to Angular Component Communication from Pluralsight. My name is Deborah Kurata, and in this module, we build a basic state management service. Communication is all about sharing. A service shares state information to communicate that information to the components of the application. Recall from the prior module that we identified several techniques for managing and sharing state. Then we examined a property bag service and how to use it to retain state in a set of properties. Now we'll move up the complexity scale and work through a basic state management service. In this module, we build a basic state management service. With it, we share entity state, such as products, throughout the application. Then we look at an alternative user interface design that displays multiple concurrent components and examine a simple yet often overlooked mechanism for keeping the state of these components in sync. Then we take a brief look at Angular's change detection and how it communicates changes to that state. Let's get started.

Communicating Through Service Notifications
Services are not only great for sharing data, they can also provide notifications. Welcome back to Angular Component Communication from Pluralsight. My name is Deborah Kurata, and in this module, we examine how to communicate through a service by broadcasting notifications. A service may have something important to say. A different product was selected or the user just logged out. Instead of waiting for some component to ask for this new state, the service can broadcast a notification. Recall from the last module that we built a basic state management service. That service retrieves, manages, and stores state values, in addition to sharing those values with our components. However, it does not provide explicit change notifications. Now, we'll move up the complexity scale and add notifications to our state management service. But it doesn't have to be a state management service. We can use the techniques presented in this module to add notifications to any service. In this module, we examine several techniques for broadcasting notifications from our service. First, we'll talk through why we don't want to use, what seems like an obvious choice, an EventEmitter. Next, we discuss what a subject is and how to use it to broadcast notifications. Then we cover BehaviorSubject and when to use it instead. Let's get started.

Communicating Using the Router
Angular's router provides several unique ways to communicate information between components. Welcome back to Angular Component Communication from Pluralsight. My name is Deborah Kurata, and in this module, we communicate between our components using the router. Sometimes we just want to pass a little information from one route to the next. The router provides easy to use features to do just that. Looking at our component communication diagram, we've covered how a component communicates with its template, including child components on that template. And we've examined techniques for components to communicate using a service as an intermediary. We can leverage these techniques to communicate between our routed components. But if we just want to pass a bit of data from one route to the next, the router provides an easy way to do that without the need for a service. In this module, we start with a quick review of routing basics. Then we take a high-level look at passing data to a routed component using several kinds of route parameters, required, optional, and query parameters. Let's get started.

Final Words
As you have seen throughout this course, Angular provides numerous ways for components to communicate. Welcome back to Angular Component Communication from Pluralsight. My name is Deborah Kurata, and the final words in this course include a recap along with a few pointers to additional information. Let's jump right in to this short module.