Cannot style an individual item in ion-list


I am trying to make certain items in an ion-list bold.

I put “bold” into the array, and then I put that array contents into the inline-style.

However, the error is “WARNING: sanitizing unsafe style value font-weight:bold;”

What is the proper way to make certain items bold in a list?


<ion-item-sliding *ngFor="let item of items">
	<ion-item (click)="viewItem(item)" style="font-weight:{{item.fontweight}};"> 


I haven’t tested this, but my instinct is to try using ng-class instead of an inline style.

This could look something like

<ion-item ng-class="{bold: item.isBold}">

Assuming isBold is a property that is either true or false, and then in your stylesheet

  .bold {
       font-weight: bold, 

incidentally, the error may be happening because font-weight needs a hyphen .


I will try your example. Also, fontweight does not need a hypen, that is the arbitrary name of an array value.


Bind to [class] instead. ng-class is Angular 1 syntax.


I could not get [class] to work, but [ngClass] worked like this:

<ion-item (click)="viewItem(item)" [ngClass]="{'bold' : item.fontweight == 'bold'}" >


See here.

<ion-item [class.bold]="item.isBold">


Thank you thank you!! That worked perfectly, exactly what I have been trying to find.