Me pregunto si es un mal patrón y un problema de rendimiento si concatenamos cadenas que consisten en texto codificado y valores de campo en la plantilla angular.
Es decir, ¿el primer componente vuelve a ejecutar la concatenación de cadenas cada vez que se ejecuta el ciclo de detección de cambios? ¿Debe sustituirse siempre por el segundo?
@Component({ selector: 'app-example', template: ` <div [ngClass]="'color'-colorName"> </div> ` }) export class ExampleComponent { @Input() colorName: string; } @Component({ selector: 'app-example', template: ` <div [ngClass]="className"> </div> ` }) export class ExampleComponent { className: string; @Input() set colorName(value: string) { this.className = 'color' + value; } }Me atrevo a decir que no verá ninguna diferencia de rendimiento en esos ejemplos. La concatenación de cadenas es muy eficaz. No importa si eso sucede en la plantilla o en otro lugar, ya que la plantilla se compila en un código js bastante simple.
No veo el cálculo previo del valor como un beneficio de rendimiento. Existen técnicas de rendimiento mucho más importantes, como el uso de la detección de cambios OnPush y la división de código.