I wonder if it's a bad pattern and a performance issue if we concatenate strings consisting on hardcoded text and field values in the angular template.
I.e. - does the first component rerun string concatenation each time change detection cycle runs? Should it be always replaced by the second one?
@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;
}
}
I dare to say you won't see any performance differences in those examples. Concatenating strings is very performant. It does not matter whether that happens in the template or somewhere else, since the template gets compiled into pretty simple js code.
I do not see pre-computing the value as a performance benefit. There are much more important performance techniques such as using OnPush change detection and code splitting.