How to Share Sharing Data Between Angular Components

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.