TypeScript 2.x By Example

Passing data to child components with @Input

Angular provides an @Input decorator which a child component can use to expose a property to the parent component. This can be any property that a child component wants to be available to the parent so that parent can assign values to it. 

In our application, we will have a  task property which will be exposed to the Task.ts component. The board component will then assign the specific task to this property that will then be used to populate the task template.

We start by marking the property task in our Task component with a @Input decorator as shown in the following code snippet:

@Component({ selector: 'app-task', templateUrl: './task.component.html', styleUrls: ['./task.component.css']})