😗
【Angular】変数に含まれる改行コードで改行する
困ったこと
Angularで文字列をレンダリングするときに文字列に含まれる改行コード（\n）で改行させる方法が分からなかった
たとえば以下のような文字列があったとする。
サンプル文字列
text = "Hello, World!\nI want to break line!";
\nで改行したい。
ただこれをhtmlに渡しただけでは改行されない。
html
<div>{{text}}</div>
出力
Hello, World!\nI want to break line!
解決策
以下のようにCSS（style="white-space: pre-wrap"）を追加するだけで改行してくれるようになる。
html
<div style="white-space: pre-wrap">{{text}}</div>
出力
Hello, World!
I want to break line!
すごい簡単。
white-spaceにpre-wrapを設定するとHTMLのタグ内に記述したホワイトスペースがそのまま描画され、改行文字や<br>要素があるときには改行してくれる。（white-spaceの詳しい説明はこちら）
注意点
HTMLタグに含まれるホワイトスペースがそのまま描画されるので以下のようにホワイトスペースを含めてhtmlを記述すると1行目にインデントが入ったような出力になる。
html
<div style="white-space: pre-wrap">
{{text}}
</div>
出力
Hello, World!
I want to break line!
インデントをいれたくない場合は1行で書く。
<div style="white-space: pre-wrap">{{text}}</div>
参考
Discussion