Share Component Data With Other Components in Angular 9

Use Angular’s Input, Output, EventEmitter, and ViewChild to share component data

Jeroen Ouwehand
Nov 16, 2018 · 4 min read
by rawpixel on Unsplash

This article applies to every Angular version, including 9. To share component data you can use the following:

  • @Input — property binding
  • @Output and EventEmitter — event binding
  • @ViewChild andAfterViewInit

Let’s look at each of them in turn.

@Input — Property Binding

If you want to pass data from the parent component to the child component, you need to use two things: @Input and property binding.

In this example, we set in the child component a variable named childExample, which is a string. We set Angular’s@Input decorator in front of the variable.

Code display by Carbon

This gives us the option to add an attribute to the selector (<app-child>) of the child, as highlighted in the example below:

In the parent, we declare a variable named parentExample. We give it a value of [childExample]. The result is that the text “Hello Angular 7” is displayed in the child component.

@Output & EventEmitter — Event Binding

With @Output and EventEmitter it’s the other way around. You can pass data back from the child to the parent component. Again, we declare a variable in the child, but this time with the@Output decorator and a new EventEmitter:

We want to emit an event to the parent component by doing the following:

On every button click in the child component we’re passing the text “Hello Angular 7” to a parent component.

In our parent component we can now set an event to the child selector (<app-child>). As you can see, we use the exampleOutput from the child, which has as value a method called exampleMethodParent with parameter $event.

Now, on every button click in the child, we get a text through an event in our parent method. In this method, we give example the value of $event. Through interpolation ({{ exampleParent }}), we can now see our child’s example text.

@ViewChild & AfterViewInit

The third way to pass data is by using @ViewChild and AfterViewInit. With this final option, we can refer to a child component and access their variables inside our parent component.

The decorator is set in the parent component. We declare the following in the class:

We also need to implement the AfterViewInit lifecycle hook, because the child is not available until the view is initialized. In the ngAfterViewInit() method we access the exampleChild from the ChildComponent and give the value to the exampleParent variable.

Our complete ParentComponent will look like this:

Again, through interpolation ({{ exampleParent }}), we can now see our child’s example text.

Better Programming

Advice for programmers.

Jeroen Ouwehand

Written by

🔥Writing new articles every month — Software Developer from The Netherlands — Angular-TypeScript-Flutter-Golang-Node.js — Twitter/Github: Jeroenouw

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade