More than 5 years have passed since last update.

Angularでyamlを読み込んだ時に改行を反映させる

Last updated at 2018-10-18Posted at 2018-10-18

Angularなどのフレームワークを使って，yamlのデータをhtmlに表示させるには，通常以下のようにする．

<p>{{labels.hogehoge}}</p>

yamlは

labels: 
  hogehoge: ほげほげ

みたいな感じ．
ただ，ここで改行を含む文字にしようと，

labels: 
  hogehoge: |
  ほげ
  ほげ

のようにしても，改行されず普通にほげほげと表示されてしまう．
改行を反映させるには，CSSで

p{
  white-space: pre-wrap;
}

とするか，改行タグをyamlの文字列に埋め込み，以下のようにinnerHtmlとして読み込ませると改行が反映される．

labels: 
  hogehoge: ほげ<br>ほげ

<p [innerHtml] = "labels.hogehoge"></p>