Menu
I'm trying to convert newline characters (\n) to html br's.
As per this discussion in the Google Group, here's what I've got:
myApp.filter('newlines', function () { return function(text) { return text.replace(/\n/g, '<br/>'); } }); The discussion there also advises to use the following in the view:
{{ dataFromModel | newline | html }} This seems to be using the old html filter, whereas now we're supposed to use the ng-bind-html attribute.
Regardless, this poses a problem: I don't want any HTML from the original string (dataFromModel) to be rendered as HTML; only the br's.
For example, given the following string:
While 7 > 5
I still don't want html & stuff in here...
I'd want it to output:
While 7 > 5<br>I still don't want html & stuff in here... Is there any way to accomplish this?
858
As you can see, a filter is simply a function which will do stuff. To use the filter, open your HTML file where you previously had { {myHtmlText}} and replace it with: This will use the filter on our variable and display the result. As we now know how AngularJS Filters work, let’s come back to our initial problem.
We mostly do work with the larger data. There are always some requirements to filter the array of objects based on search criteria or filter the whole array of objects based on a given input. Angular does provide some classic feature to make reusable code which can work throughout the application.
A filter is kinda useless... Just inject some HTML and use the ng-bind-html directive. The question is incorrectly marked as an exact duplicate of an existing question. By using the CSS white-space property, you can display newline characters without adding any HTML tags. <p>, <br/> or <pre>
Angular does provide some classic feature to make reusable code which can work throughout the application. Let’s discuss on how to apply filter for *ngFor loop Let’s understand what is a pipe in Angular?
Maybe you can achieve this only with html, a <preformated text> way ? It will avoid from using filters or do any kind of processing.
All you have to do is display the text within an element that has this CSS:
<p style="white-space: pre;">{{ MyMultiLineText}}</p> This will parse and display \n as new lines. Works great for me.
Here, a jsFiddle example.
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
