Hey there! The issue you're seeing is because every <app-graph-area> component is being rendered with the same default configuration—no unique data or settings are passed to each instance. Let's walk through how to fix this step by step.

Step 1: Add Unique Data to Your Card Definitions #

First, update your cards array in home.component.ts to include metadata that defines what each tile should display. This could be a graph type, dataset, or any custom config your <app-graph-area> needs.

cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
  map(({ matches }) => {
    if (matches) {
      return [
        { title: 'Card 1', cols: 2, rows: 1, graphConfig: { type: 'daily-sales', dataset: [12, 19, 3, 5, 2, 3] } },
        { title: 'Card 2', cols: 2, rows: 1, graphConfig: { type: 'monthly-traffic', dataset: [22, 30, 15, 25, 18, 20] } },
        { title: 'Card 3', cols: 2, rows: 1, graphConfig: { type: 'conversion-rates', dataset: [5, 8, 3, 10, 6, 7] } },
        { title: 'Card 4', cols: 2, rows: 1, graphConfig: { type: 'revenue-trend', dataset: [150, 200, 180, 250, 220, 300] } }
      ];
    }
    return [
      { title: 'Card 1', cols: 2, rows: 1, graphConfig: { type: 'daily-sales', dataset: [12, 19, 3, 5, 2, 3] } },
      { title: 'Card 2', cols: 1, rows: 1, graphConfig: { type: 'monthly-traffic', dataset: [22, 30, 15, 25, 18, 20] } },
      { title: 'Card 3', cols: 1, rows: 2, graphConfig: { type: 'conversion-rates', dataset: [5, 8, 3, 10, 6, 7] } },
      { title: 'Card 4', cols: 1, rows: 1, graphConfig: { type: 'revenue-trend', dataset: [150, 200, 180, 250, 220, 300] } }
    ];
  })
);

Step 2: Update <app-graph-area> to Accept Inputs #

Modify your GraphAreaComponent to receive the unique config via an @Input() property. This lets the component adapt its content based on the data passed to it.

// graph-area.component.ts
import { Component, Input } from '@angular/core';

// Optional: Define a TypeScript interface for type safety
interface GraphConfig {
  type: string;
  dataset: number[];
}

@Component({
  selector: 'app-graph-area',
  templateUrl: './graph-area.component.html',
  styleUrls: ['./graph-area.component.css']
})
export class GraphAreaComponent {
  @Input() graphConfig!: GraphConfig; // Use non-null assertion if you're sure config will always be passed
}

Then, update the template of <app-graph-area> to use this config. For example, if you're using a chart library like Chart.js, you'd initialize the chart with graphConfig.dataset and adjust the type based on graphConfig.type.

Step 3: Pass the Config to Each <app-graph-area> Instance #

Back in home.component.html, bind the graphConfig from each card to the <app-graph-area> component:

<div class="grid-container">
 <h1 class="mat-h1">Today Deals</h1>
 <mat-grid-list cols="2" rowHeight="350px">
 <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
 <mat-card class="dashboard-card">
 <mat-card-header>
 <mat-card-title> {{card.title}} </mat-card-title>
 </mat-card-header>
 <!-- Pass the unique config here -->
 <app-graph-area [graphConfig]="card.graphConfig"></app-graph-area>
 </mat-card>
 </mat-grid-tile>
 </mat-grid-list>
</div>

Bonus: Using Different Components per Tile #

If you need entirely different components (not just different data) in each tile (e.g., a line chart in one, a table in another), you can extend this approach:

1. Add a componentType field to your card objects (e.g., componentType: 'line-chart' or componentType: 'data-table')
2. Use ngSwitch in your template to render the correct component:

<ng-container [ngSwitch]="card.componentType">
  <app-line-chart *ngSwitchCase="'line-chart'" [data]="card.graphConfig.dataset"></app-line-chart>
  <app-data-table *ngSwitchCase="'data-table'" [tableData]="card.tableData"></app-data-table>
  <app-pie-chart *ngSwitchCase="'pie-chart'" [dataset]="card.graphConfig.dataset"></app-pie-chart>
</ng-container>

This way, each grid tile can display completely unique content tailored to its purpose.

内容的提问来源于stack exchange，提问作者Anthony COULAIS