How to align text in mat-cell in Angular-Material

Question

Here, I am using Angular-Material for displaying the list of products in which I have flat json object. I have json as follows:

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"
},

]

Edited I am displaying this data like this :

<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>

I am showing identifier, category and product in first column and price in second column in the first row. Row onwards for same identifier, category I am displaying onlyproduct.Because of which my cell height varies and of course because of that the price displaying in the next column seems to be the price of category. I want the price to be displayed in the bottom of the first row for same identifier, category. Please refer to the working example.

Everything seems perfect but the funny thing here is I am not been able to align the text inside the mat-cell at the bottom as my cell height varies from each other. I want to align text only when the cell height is greater than 50px

Solution

Here's a possible solution using CSS - stackblitz

Markup

<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;
}

The idea is to make the Price position dependent on HideShowCategory(element).

Comments

[camden_kid]

Can you create a working example for us to see?

[Iswar]

@camden_kid I have updated in the question. Please refer to the working example here stackblitz.com/edit/…

[camden_kid]

@IswarKChettri Glad it helps. It seemed the solution that required the least changes to your markup.