Sharing Data between Components in Angular

From the creator

Fully documented lesson at https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ In this episode, I am going to show you four different ways to share data between Angular components. Parent to Child the Input Decorator When you declare a variable with the Input decorator in the child component, it allows that variable to be received from a parent template. In this case, we define a message variable in the parent, then use square brackets to pass the data to the child. Now the child can display this data in its own template. Child to Parent via ViewChild ViewChild allows a one component to be injected into another, giving the parent access to its attributes and functions. One caveat, however, is that child won't be available until after the view has been initialized. This means we need to implement the AfterViewInit lifecycle hook to receive the data from the child. In the AfterViewInit function we can access the message variable defined in the child Child to Parent via Output and EventEmitter Another way to share data is to emit data from the child, which can be listed to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entires, and other user events. In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new event emitter. Then we create a function named sendMessage that calls emit on this event with the message we

Published 2017-04-30 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.