Insert squares into mat-table - Angular

Question

I have problem with mat-table. I need to insert the square in to the cells but I don't know it.

This is my code now.

<div class="my_item">
        <div><span class="skuska"><span class="mat-subheading-2">Január</span></span></div>
        <mat-table #table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
          </ng-container>

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

And this is running code ... I have only text in the table, and i need add the squares with numbers instead the text.

My running code:

I have only picture example of table with squares

Table with squares:

Can you help me please?

Thank you so much !

Now I have that ->

Html file

 <div class="my_item">
        <div><span class="skuska"><span class="mat-subheading-2">Apríl</span></span></div>
        <mat-table #table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}} </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.background-color] = "element.color"> {{element[column.id]}} </mat-cell>
          </ng-container>

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

.ts file

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';


@Component({
  selector: 'app-harmonogram',
  templateUrl: './harmonogram.component.html',
  styleUrls: ['./harmonogram.component.css']
})
export class HarmonogramComponent implements OnInit {

  dataSource;
  displayedColumns = [];
  @ViewChild(MatSort) sort: MatSort;

  /**
   * Pre-defined columns list for user table
   */
  columnNames = [{
    id: "po",
    value: "po"

  }, {
    id: "ut",
    value: "ut"
  }, {
    id: "st",
    value: "st"
  }, {
    id: "stv",
    value: "št"
  }, {
    id: "pi",
    value: "pi"
  }, {
    id: "so",
    value: "so"
  }, {
    id: "ne",
    value: "ne"
  }];

  ngOnInit() {
    this.displayedColumns = this.columnNames.map(x => x.id);
    this.createTable();
  }

  createTable() {
    let tableArr: Element[] =
      [
        { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'black'},
      { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'green'},
      { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'grey'},
      { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'blue'},
        { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'green'}
      ];
    this.dataSource = new MatTableDataSource(tableArr);
    this.dataSource.sort = this.sort;
  }
}

export interface Element {
  po: string,
  ut: string,
  st: string,
  stv: string,
  pi: string,
  so: string,
  ne: string,
  color: string,
}

And this is part of .css file

.mat-cell{

  height: 26px;
  width: 26px;
  display: inline-flex;
  border-left: 4px solid white;
  padding-left: 0px;
}

I can change only the row color.. but i need change the specific cells, eg with value "8" (now the numbers of cells are invisible)

Answer 1

Use this in css:

See here: https://stackblitz.com/edit/angular-d2yrwq-yfwgrf?file=app/table-basic-example.css

.mat-cell{
    background-color: green;
    min-height: 26px;
    border-left: 4px solid white;
    padding-left: 9px;
}
.mat-cell:last-child{
     background: linear-gradient(90deg, green 50%, white 50%);
}

For dinamic background-color use [style.backgound]="YourColor"

and if it last-child (means element[column.id]='ne' ) use [style.backgound]="linear-gradient(90deg, 50%, YourColor white 50%)"

See here : https://stackblitz.com/edit/angular-d2yrwq-bdnuwy?file=app/table-basic-example.html