Initially, this may seem somewhat unnecessary if you're referring to translations specifically.
If you are attempting to utilize a pipe in Angular 2 or 4, your code should resemble the following:
import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
name : 'translate'
})
export class MyPipe implements PipeTransform {
transform(val : string) : string {
// Check for numbers...
return (parseInt(val) + 10) + '';
}
}
Possibly, the above code will function as expected if the class is recognized by your component. Typically, pipes reside within their own module, so ensure that the pipe is properly exported there.
Regarding your second inquiry:
I find it preferable to relocate the logical aspects of pipes to static methods within another class such as 'PipeFunctions.ts'.
This approach could be something like the following:
export class PipeFunctions {
static translate(val : string) : string {
return (parseInt(val) + 10) + '';
}
}
In this way, the translation can be accessed not only by the pipe but also by a component. Simply create a proxy method in your xyz.component.ts file like so:
translate(val : string) : string {
return PipeFunctions.translate(val);
}
Subsequently, in your corresponding HTML template:
<a href="translate('1')">whatever</a>
If this doesn't yield the desired result (unfortunately, I cannot verify it here), try utilizing:
<a [href]="translate('1')">whatever</a>
or possibly:
<a [attr.href]="translate('1')">whatever</a>