typescript - Hur man justerar text i mat-cell i Angular-Material

Här använder jag Angular-Material för att visa listan över produkter där jag har ett platt JSON-objekt. Jag har JSON enligt följande:

data: [
{
    "identifier": "data",
    "categoryId": "1",
    "category": "Baked goods",
    "product": "Aunt Hattie's",
    "price": "375"
},
{
    "identifier": "data",
    "categoryId": "1",
    "category": "Baked goods",
    "product": "Back to Nature",
    "price": "343"
},        
{
    "identifier": "data",
    "categoryId": "2",
    "category": "Cakes",
    "product": "Mars Muffin (McVitie's)",
    "price": "465"
},
{
    "identifier": "data",
    "categoryId": "2",
    "category": "Cakes",
    "product": "McVitie's",
    "price": "251"
},
{
    "identifier": "data",
    "categoryId": "2",
    "category": "Cakes",
    "product": "Mr Kipling",
    "price": "260"
},
{
    "identifier": "data",
    "categoryId": "2",
    "category": "Cakes",
    "product": "Mr Kipling Frosty Fancies",
    "price": "210"
},
{
    "identifier": "data",
    "categoryId": "3",
    "category": "Dairy products",
    "product": "Amul",
    "price": "474"
},
{
    "identifier": "data",
    "categoryId": "3",
    "category": "Dairy products",
    "product": "Borden",
    "price": "184"
},
{
    "identifier": "data",
    "categoryId": "3",
    "category": "Dairy products",
    "product": "Broughton Foods Company",
    "price": "43"
},

]

Redigerad Jag visar dessa uppgifter så här :

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Product Column -->
  <ng-container matColumnDef="Product">
    <th mat-header-cell *matHeaderCellDef> Product </th>
    <td mat-cell *matCellDef="let element">  
      <div *ngIf="!HideShowCategory(element)"> 
          {{element.identifier}} <br/>
          {{element.categoryId}} <br/>
          {{element.category}} <br/>
      </div>
        {{element.product}} 
    </td>
  </ng-container>

  <!-- Price Column -->
  <ng-container matColumnDef="Price">
    <th mat-header-cell *matHeaderCellDef> Price </th>
    <td mat-cell *matCellDef="let element"> {{element.price}} </td>
  </ng-container>


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

Jag visar identifierare, kategori och produkt i första kolumnen och pris i andra kolumnen i första raden. Från och med nästa rad för samma identifierare, kategori visar jag endast produkt. På grund av detta varierar cellhöjden och naturligtvis verkar priset som visas i nästa kolumn vara priset för kategorin. Jag vill att priset ska visas längst ner i första raden för samma identifierare, kategori. Vänligen se det fungerande exemplet.

Allt verkar perfekt, men det roliga här är att jag inte har kunnat justera texten inuti mat-cell längst ner eftersom min cellhöjd varierar från varandra. Jag vill justera texten endast när cellhöjden är större än 50px.

Svar #1

Här är en möjlig lösning med CSS - stackblitz

Märkning

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Product Column -->
  <ng-container matColumnDef="Product">
    <th mat-header-cell *matHeaderCellDef> Product </th>
    <td mat-cell *matCellDef="let element">  
      <div *ngIf="!HideShowCategory(element)"> 
            {{element.identifier}} <br/>
            {{element.categoryId}} <br/>
            {{element.category}} <br/>
      </div>
         {{element.product}} 
      </td>
  </ng-container>

  <!-- Price Column -->
  <ng-container matColumnDef="Price">
    <th mat-header-cell *matHeaderCellDef> Price </th>
    <td mat-cell *matCellDef="let element" class="price-container">
      <span [ngClass]="{'price-bottom': !HideShowCategory(element)}">{{element.price}}</span>
    </td>
  </ng-container>


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

CSS

table {
  width: 100%;
}

.price-container {
  position: relative;
}

.price-bottom {
  position: absolute;
  bottom: 0;
}

Idén är att göra prispositionen beroende av HideShowCategory(element).