diff --git a/src/app/heroes/hero-list/hero-list.component.html b/src/app/heroes/hero-list/hero-list.component.html
index d23e255e..cf3aae29 100755
--- a/src/app/heroes/hero-list/hero-list.component.html
+++ b/src/app/heroes/hero-list/hero-list.component.html
@@ -13,8 +13,8 @@ <h2 class="section-title">{{ 'heroesList' | translate }}</h2>
                      src="assets/images/heroes/{{hero.id}}-thumbnail.jpg">
                 <img *ngIf="!hero.default"
                      (click)="seeHeroDetails(hero);" mat-list-avatar src="assets/images/heroes/default.png">
-                <h3 mat-line [ngClass]="{'cp': hero.default}" (click)="seeHeroDetails(hero);"> {{hero.name}} </h3>
-                <p mat-line [ngClass]="{'cp': hero.default}" (click)="seeHeroDetails(hero);">
+                <h3 mat-line [class.cp]="hero.default" (click)="seeHeroDetails(hero);"> {{hero.name}} </h3>
+                <p mat-line [class.cp]="hero.default" (click)="seeHeroDetails(hero);">
                     <span>{{hero.alterEgo}}</span>
                 </p>
                 <div class="hero-actions">