I am learning Angular 2 and now I am stuck on a custom pipe. I made a domain find pipe
export class FindDomain implements PipeTransform {
transform(value: string, args: string[]): any {
if (!value) return value;
var regex = /((http|ftp|https):\/\/)*([\w_-]+(?:(?:\.[\w_-]+)+)*)[\w_-]+(?:(?:\.+([a-z]{10}|nl|be|biz|com|net)+)+)([\w.@?^=%&:/~+#-]*[\w@?^=%&/~+#-]*)?/g;
return value.replace(regex, function(txt) {
return "<a href='+txt + "'>"+ txt + "</a>";
});
}
}
It's working fine, but now it's returning text ( ) not a clickable html element. I am using
< h2 >{{ gift.naam | findDomain }}< /h2 >
after some searching on internet, I found
< h2 [innerHtml]="{{ gift.naam | findDomain }}">< /h2 >
The first option returns plain text and the second option big errors
Got interpolation ({{}}) where expression was expected at column 0 in [{{ gift.naam | findDomain }}]
I think it must be a simple solution, but I can't find it now.