Multiple components make our application more reusable, but how do we communicate between them?

Passing Data to a Component

We want to use the @Input() decorator from @angular/core to pass data to a component from the parent. Let’s review a simple example to see how this can be accomplished.

To begin, we need to create a new component ng g c name_of_your_component , I named my component first , then import the @Input() decorator and create a name variable:

Our first.component.html should look like this:

We can use our component in app.component.html , but what about the name variable? We can pass data to the component by using class="btn" . Not clear? See the example below.