Sending data from parent to child component (@Input)

Ref: https://angular.io/guide/inputs-outputs

Configuring the child component

The @Input() decorator in CardComponent signifies that the property titles can receive its value from its parent component (AppComponent).

export class CardComponent {

  @Input({required: true}) titles: string[] = [];
}

Configuring the parent component

The next step is to bind the property titles in the AppComponent template.

Use property binding to bind the property titles in the child to the property cardsTitle of the parent.

export class AppComponent {

  cardsTitle: string[] = ['Maia', 'Dylan', 'Minoru', 'Amarachi', 'Ceallagh'];
}

Configuring the parent template

<app-cards [titles]="cardsTitle"></app-cards>