How to change content of mat-cell row conditionally where as column cell values gets displayed dynamically

Question

I have rendered column cell values dynamically through mat-table and my requirement is to display content of mat-cell differently based on column cell value rendered.

I am new to angular and I have tried all possible solutions I have seen in google but did not help me out.

Considering I have 2 columns cell values rendered dynamically 1. DealerSize 2.Major Revenue

The content of above two respective columns cell value based should be different. DealerSize - user should be able to see checkboxes, Major Revenue - user should be able to enter min and max values.

I have given code below for checkboxes and min and max values

Please help me out if there is a way to render row cell data code as we want. thanks in advance.

          <mat-cell *matCellDef="let element">
            <!-- below content should be displayed if column-1 cell value == "DealerSize"-->
            <div fxLayout fxLayoutGap="10px" fxLayoutAlign="center cener">
              <div *ngFor="let object of items; let i = index">
                <mat-checkbox>{{ object.text }}</mat-checkbox>
              </div>
            </div>
            <!-- below content should be displayed if column-2 cell value == "Major Revenue" -->
            <div fxLayout fxLayoutGap="10px" fxLayoutAlign="center cener">
              <div>
                <mat-form-field class="width">
                  <input matInput placeholder="Min Value" />
                </mat-form-field>
              </div>
              <div>
                <mat-form-field class="width">
                  <input matInput placeholder="Max Value" />
                </mat-form-field>
              </div>
          </mat-cell>

Answer 1

So, regarding to your logic you can do something like that :

<table mat-table [dataSource]="dataSource">
  <!-- col DealerSize -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>DealerSize</th>
    <td mat-cell *matCellDef="let element">
      <mat-checkbox>{{ object.text }}</mat-checkbox>
    </td>
  </ng-container>

  <!-- col Major Revenue -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>DealerSize</th>
    <td mat-cell *matCellDef="let element">
      <div>
        <mat-form-field class="width">
          <input matInput placeholder="Min Value" />
        </mat-form-field>
      </div>
      <div>
        <mat-form-field class="width">
          <input matInput placeholder="Max Value" />
        </mat-form-field>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

You can define the template for the two columns. Let met know if it's that you wanted. If not please create a stackblitz (https://stackblitz.com/edit/angular) or something like that in order to reproduce your need.