The way a component is used in an application plays a role in how that component communicates and shares information and data with other components.

Your components could be nested within one another or be routable, meaning you route one component to another, or they may have no relationship at all. The type of relationship components have with each other determines how they communicate.

Let’s first look at the different ways components can communicate:

• Using Input()
• Using @Output()
• Using the Template Reference variable
• @ViewChild and @ContentChild
• Using Services

Using Input()

When using nested components you can have a situation where components represent some part of the view of other components. Nested components communicate with their container components using @Input and @Output bindings.

Before we get to that, let’s first understand how nested components work through these images.