As described in the linked post from @dan vid, function calls within the template are a bad practice because they will be executed with each change detection tick.
So, either you can use a pipe or you pre-calculates the respective value.
Pipe
If you're using a pipe you'd still calculate the values multiple times but only if the input value of the pipe changes, which reduces the times of re-calculation by a lot compared to function calls in the template.
A basic pipe would look like this:
@Pipe({ name: 'isAlreadyActive' })
export class IsAlreadyActivePipe implements PipeTransform {
transform(id: string): boolean { // <- or any other return type instead of boolean
// Implement your check and return the result
}
}
And the call in your case would look like this:
<option
...
title="{{ site.id | isAlreadyActive ? 'Site is already added.': '' }}"
...
>
{{site.name}}
</option>
You'll find more about pipe here.
Storing a conditional result in a variable
There is also the possibility to store the pipe return value in a variable (see here).
This would look like this:
<ng-container *ngIf="site.id | isAlreadyActive as isActive">
<option
...
title="{{ isActive ? 'Site is already added.': '' }}"
...
>
{{site.name}}
</option>
</ng-container>
In this example, we've stored the result in isActive and your calculation would only be executed one time but as soon as the return value is falsy the content of the *ngIf isn't shown.
In you case, for example, you could return instead of a simply boolean and object containing a boolean, e.g., { isActive: returnValue }. That way your return value would be truthy and the content would be shown.
Pre-Calculation
The other option would be to pre-calculate the value in your component and assign the value to site.isActive as example. That way you only have one calculation, which is also better than a function call from the template.
site.disable = this.isSiteAlreadyAdded(site.id)