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.