How to insert break line within a string in Angular

Photo by Lubo Minar on Unsplash

In this article, you will learn 3 ways of adding break line to string interpolation in Angular 2+.

The first way is by using CSS

You can simply add styling property white-space: pre-wrap to the div surrounding your string, where it breaks the line at new line character in the string and renders the white spaces as it is.


<div style="white-space:pre-wrap">{{withBreaksHtml}}</div>

The second way is by using HTML binding in Angular

You can use “inner Html” property binding to interpolate an HTML snippet into an…

Safaa Hammoud

I'm a work in progress FullStack Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store