15

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 />')}}
1
  • 5
    Create a Pipe for that. Commented Jan 10, 2017 at 7:29

3 Answers 3

29

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>
Sign up to request clarification or add additional context in comments.

Comments

17

{{}} 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.

Plunker example

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.

Comments

0

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*`$" : "" }}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.