I have used with below interpolation in html page.
<div>{{config.CompanyAddress.replace('\n','<br />')}}</div>
and also used
<div>{{config.CompanyAddress.toString().replace('\n','<br />')}}</div>
But both are showing text as below
{{config.CompanyAddress.replace('\n','<br />')}}
{{config.CompanyAddress.toString().replace('\n','<br />')}}
You can use a pipe for the same:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
transform(value: string): string {
return value.replace(/\n/g, '<br/>');
}
}
The pipe must be included in your @NgModule declarations to be included in the app. To show the HTML in your template you can use binding outerHTML.
<span [outerHTML]="config.CompanyAddress | replaceLineBreaks"></span>
{{}} is for string interpolation and the result will always be added as String. The binding doesn't work at all in this case because of the < and > contained in the expression, the {{}} are not interpreted as expected.
<div [innerHTML]="replaceLineBreak(config.CompanyAddress) | safeHtml"></div>
with
replaceLineBreak(s:string) {
return s && s.replace('\n','<br />');
}
should do what you want. As mentioned by @hgoebl replaceLineBreak could be implemented as pipe as well if you need it at several places.
Hint: It's discouraged to bind to methods directly, because the method is called at every change detection cycle. A pure (default) pipe is only called when the input value changes. Therefore a pipe is more efficient.
Another way is to do the replacement only once and bind to the value with the replaced line breaks instead of calling replaceLineBreak repeatedly.
Hint: You probable want to replace all line breaks, not only the first. one. There are enough JS questions out there that explain how to do that, therefore I didn't bother.
I was looking for an approach for replacing a sub-string in a variable in an angular template, but passing both the substring and the replacement by parameter to the pipe.
//TS
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "replaceSubstring" })
export class ReplaceSubstring implements PipeTransform {
transform(subject: string, substring: string, replacement: string): string {
//notice the need to instantiate a RegExp object, since passing
//'substring' directly will NOT work, for example
//subject.replace(substring, replacement) and
//subject.replace(`/${substring}/`, replacement) don't work
return subject.replace(new RegExp(substring), replacement);
}
}
<!--HTML-->
<!--Example: remove a dot and the numbers after it, from the end of 'variable'-->
<!--Parameters in this case are "\\.\\d*`$" and "",
you can pass as many as you want, separated by colons ':'-->
{{ variable | replaceSubstring: "\\.\\d*`$" : "" }}
