Cannot style an individual item in ion-list

Ionic Framework ionic-v3
1

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

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

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 .

https://docs.angularjs.org/api/ng/directive/ngClass

3

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

4

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

1 Like
5

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

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

6

See here.

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

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