How to pass data from Parent to Child component in Angular ?

We can use the @Input directive for passing the data from the Parent to Child component in Angular

Using Input Binding: @Input - We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is the child component.

Parent Component

app.component.ts There are two arrays. One for list_prog - list of languages, prog_details - details of languages.

app.component.html Here we have added our child component inside the parent component and pass two data one is prog_title and another is curr_info. But make sure you have already declared variable details and title inside the child component.

Child Component

cdetail.component.ts Here we have used the @Input() directive inside the child component. Now in the child component, the data passed by the parent component can be used.

cdetail.component.html

Output