ngClass on an angular mat table row


i want to use the select-option of an angular select to change the css-class of a specific row of an angular material table.

My selection works perfectly and i can give the planet on select an "selected=true" property. (all other set to false). Now i want to change the css-class (red border) of the specific row, where the object has the "selected" property = true.

my html looks like this:

<table mat-table [dataSource]="planets" [trackBy]="trackById" class="mat-elevation-z8" id="planetList">

//all ng containers

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row [ngClass]="{'selectedPlanet': planet.selected === 'true'}" *matRowDef="let row; columns: displayedColumns;"></tr>


.selectedPlanet {border-color: red;}

But i have the problem, that my console throws an error, something like "ctx_r7.planet is undefined".
i dont know how to use ngClass here on a mat table to change the row.
Has anyone an idea, how i can solve this?


You need a safe Navigation as your planet is undefined.

<tr mat-row [ngClass]="{'selectedPlanet': planet?.selected === 'true'}" *matRowDef="let row; columns: displayedColumns;"></tr>

You don’t have the planet defined I assumed the entry row has selected property so use the row property to access any attribute

<tr mat-row [ngClass]="{'selectedPlanet': row?.selected === 'true'}" *matRowDef="let row; columns: displayedColumns;"></tr>

Answered By – joyBlanks

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published