Need to use same component more than 2 times with unique values in Angular

Question

Need to create an Angular dashboard with some tiles; I create a service for tiles but need to pass to the child component from dashboard component.

 <app-tiles class="card overview-box-1 teal" [data]="tileContent"></app-tiles>

Dashboard

 tileContent = {
    header: "Text header",
    content: "test content"
  };

app-child

@Input() data: string;

Now as I have multiple tiles, how can I pass unique data to every tiles?

Answer 1

Why don't you make the TilesComponent a TileComponent. You could have an array that contains all of the data you need and use an *ngFor to iterate over your list of data.

Your AppTileComponent would have an input called tileContent that took an array of tiles.

export class AppTileComponent {
  @Input() tilesData: TilesData[];
}

That tilesData can be whatever you need to be shown in your tiles.

tileContent = [{
 header: "First Data",
 content: "first data content"
},
{
  header: "Second Data",
  content: "Second Data content"
}]

You could even pass this in from a service and get the same result you're looking for.

Answer 2

you can use input if you want to send data from parent to child, check click here