0

I´m pretty new to Angular and typescript and my target is to create a checkbox inside a mat-cell that based on the childIsChecked state of the checkbox, changes the background-color of the cell.

I created a <custom-mat-cell> that is going to change the background color based on a <custom-checkbox>(normal checkbox with ability to output the checked state). The color change works perfectly fine. But the background-color seems to not completly fill the actual cell itself and when the checkbox is clicked for the first time, the content is also going to move upwards.

So basicaly my questions are:

How can i fully fill the background-color of the actual cell? And how can i prevent the content from moving around?

I have already tried giving the row a height in px and then setting the height and width to a 100% for the cell which seems to be the solution for non-Angular tables as mentioned here:

  1. Make a DIV fill an entire table cell
  2. How do I make a div fill an entire table cell?

My attempt

custom_mat_cell.components.css

.checked {
  background-color: green;
}

.unchecked {
  background-color: red;
}

custom_mat_cell.components.html

<mat-cell  [ngClass]="{'checked':childIsChecked, 'unchecked':!childIsChecked}">
  <custom_checkbox (changeBackground)="change_parent_background()"></custom_checkbox>
</mat-cell>

custom_mat_cell.components.ts

export class custom_mat_cell {
  childIsChecked: boolean = false

  constructor() {
  }

  change_parent_background(){
    this.childIsChecked =!this.childIsChecked
  }
}

cell/column generating code:

<ng-container *ngFor="let item of [].constructor(page_count); let i = index">
    <ng-container matColumnDef="{{i+1}}">
        <mat-header-cell class="page_cell" *matHeaderCellDef>Page {{i + 1}}</mat-header-cell>
        <custom_mat_cell *matCellDef="let element, let j = index"></custom_mat_cell>
    </ng-container>
</ng-container>

My attempt so far leads to this:

I would like to somehow fill the full range of the cell

I would like to somehow fill the full range of the cell

When i click onto the checkbox, the content is moving upwards

When i click onto the checkbox, the content is moving upwards.

Moritz Hartmann
  • 140
  • 1
  • 10
  • Please share a working stackblitz with the issue replicated and screenshots on how the output should be! – Naren Murali Sep 08 '22 at 12:01
  • One thing I would take a look at it is verifying that when you check the checkbox that it doesn't apply some sort of other CSS styling based on the checked state. – SomeStudent Sep 08 '22 at 12:54
  • @SomeStudent ty that one helped me a lot. Its actually adding some column based css classes which makes them move when they are applied. Its adding `mat-cell cdk-column-columnname mat-column-columnname` to them. – Moritz Hartmann Sep 08 '22 at 13:34
  • You can try to override those styles as needed in your css, may need to use !important. I can't recall off the top of my head, but I want to say material makes heavy usage of flex layouts and the like (which makes sense, since flex layouts make life easy) – SomeStudent Sep 08 '22 at 13:37

0 Answers0