Communicating between Angular Components

Name: Communicating between Angular Components
Author: Michaela Ochnich

Preview the first lesson free — get full access to all 7 lessons.

Course: On-Demand

This lesson will show you how to use the input property to send information from a parent to a child component. So here, I have a starter application that was generated using the Angular CLI. And first, I'm going to generate a parent component and a child component to pass information between. And here I just skipped the test file generation and the separate CSS file. And then in the root application component template, I'm gonna delete all of the starter code, and then add in that parent component. So now that that's set up, I'm gonna open up the parent template and then embed in that the child component. So now that, that child component is in the parent component, I'm gonna open up the child component class, and then I'm gonna import the input decorator from the Angular core library. So input properties can be used to send information from a parent component to a child component, and it keeps that information in sync. So next, I'm going to declare an input property in the child component class. So the input decorator is what marks message as an input property, and an input property is bound to a property in the Dom. In this case, it will be bound in the parent component. When that property in the Dom from the parent is updated, Angular will update this input property in the child component class as well, which is what keeps that data in sync. So here I have the property set with a definite assignment operator since this property is going to receive its initial value from the parent. However, you can also set a default value for the property like so. So here if this component wasn't any way initialized without the input property being bound in the parent component, then this message value would default to welcome. And so next I'll display this message in the child component template. So now that the child component is set up to receive that input value, the parent needs to pass that value to the child. So first in the parent component class, I'll define a message to pass. Then in the parent template, I'll bind this to the child components input property. So here I'm using property binding, which is done with the square brackets to bind the parent message variable to the message input property that was created in the child component. And then viewing that in the browser, you can see the message that was set in the parent component is being passed to and displayed in the child component. So you may sometimes want to refer to that input value by a different name within the child component class. In those cases, you can create an alias for the input property. So going back to the child component class, I'm gonna rename this property to parent message. And then in the input decorator, pass the property name that the parent component is binding to. In this case, that's the message. And now that the child component knows this input property as parent message, the template has to be updated. And then viewing that in the browser you can see that, that message is still being passed from parent to child. So that's all for this lesson on how to use input properties to communicate from the parent to the child component. And in the next lesson, you'll learn how to intercept any input value changes using setters and getters.

Intermediate Provider : Michaela Ochnich 7 Lessons · 36m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

This chapter will demonstrate different ways you can send information between components, depending on their relationship to each other. You’ll learn how to pass information from parent to child, child to parent, or both ways between two components. You’ll also learn how to intercept some of these data changes, and alter them if needed before use in the component.

What You'll Learn

Send data from a parent component to a child component using Input, Setters and Getters, and OnChanges
Send data from a child component to a parent component using Output and EventEmitter
Access a child component through the parent's template or class using ViewChild and Reference Variables
Communicate bidirectionally between two components
Intercept data changes and alter them before they are used in the component
Share data between components using a Shared Service

Key Takeaways

The way you communicate between Angular components depends on their relationship to each other.
Information can be passed from parent to child, from child to parent, or both ways between two components.
Some data changes can be intercepted and altered before they are used in the component.
A parent can access a child component through the parent's template or class.
A shared service is one approach to communicating between components.

Frequently Asked Questions

What does this course cover?

This chapter demonstrates different ways to send information between Angular components depending on their relationship, including passing data from parent to child, child to parent, or bidirectionally between two components, and intercepting data changes to alter them before use.

What will I learn to do in this course?

You will learn how to send data from a child component to a parent component, send data from a parent component to a child component, access a child component through the parent's template or class, and communicate bidirectionally between two components.

What topics or techniques are taught in the lessons?

The lessons cover Input, Setters and Getters, OnChanges, Output and EventEmitter, ViewChild, Shared Service, and Reference Variables.

What skills does this course help me build?

It builds skills in Angular Components, Communication Diagrams, Component Diagram, Component Libraries, Connected Components, and HTML Components.

Can I learn to modify data before a component uses it?

Yes. The course teaches how to intercept some of these data changes and alter them if needed before use in the component.