I have a small angular filter that insert an (bootstrap) icon in place of a true value. It works but the html is encoded:
var conApp = angular.module('conApp', []);
conApp.filter('trueIcon', function($filter){
return function(booleanValue){
return booleanValue ? '<i class="icon-ok"></i>' : '';
}
});
Do i have to implement another filter to decode the html ? Is there an "angular" way of doing this ?
You need to use ng-bind-html to render html.
<span ng-bind-html="foo | trueIcon"></span>
That said... that's really not what filters are for. Filters are more for scrubbing data being written to a view, rather than generating elements of the view/DOM itself. You'll probably be better off creating a directive for that:
app.directive('trueIcon', function() {
return {
restrict: 'E',
template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>',
scope: {
value: '='
}
};
});
<true-icon value="foo"></true-icon>
AngularJS is sanitizing results of expression evaluation by default. To display HTML as markup you've got 2 options:
While the above will make your filter work, maybe you should consider turning it into a directive?
Another approach I found for the case of converting \r\n to
is to use a small function and *ngFor.
In your ts file, add the function
splitLines(text: String): string[] {
return text.split(/\r?\n/);
}
In html
<span *ngFor="let row of splitLines(multilineStringVariable)">
{{row}}<br/>
</span>
