CODEWITHSUNDEEP
javascriptangularstring-interpolation
Nimesh Vaghasiya
Nimesh Vaghasiya

Reputation: 977

How to replace string in angular 2?

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 />')}}

Upvotes: 15

Views: 67815

Answers (3)

Scaramouche
Scaramouche

Reputation: 3257

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

Upvotes: 0

Siddharth Sharma
Siddharth Sharma

Reputation: 1711

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>

Upvotes: 29

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

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

Upvotes: 17

Related Questions