はじめに

日々Qiitaの集合知に感謝。lovedと申します。
今回はAngular7で軽く詰まった点を共有致します。お役立て下さいませ。

お題

Angularでi18n対応する場合にはAngular公式のi18n機能とは別に、
ngx-translateが使用可能です。
今回はngx-translateを使用して、動的に多言語文言をアプリの中に組み込む方法を解説します。
理解していると「なるほど、まぁそうだよな」という話ですが、誰かの助けになれば幸いです。

対象読者

Angular7でのi18n対応に追われる諸兄姉の皆様
基本的な入れ方・使い方は下記投稿に親切な解説があります。
https://qiita.com/daikiojm/items/def764b12c8ff2ebbc92

シンプルに使用する場合

<span translate>多言語対応したい文言</span>
<input [type]="'text'" placeholder="{{'多言語対応文言' | translate }}"></span>

Angularでhtmlに{{}}パイプをする場合は、属性名に[]を付けないよう注意しましょう。
(良いエディタだと怒られるので心配ありませんが)

動的に使用する場合(本題)

例えば下記ポップアップをi18nしたいとします。

window.confirm('こうかいしませんね？');

この場合は上記のシンプルな方法では実現できません。(できたらすみません!)
以下のようにhtml内に隠し要素を記載して取得できます。

<span  [hidden]="true" id="confirm-i18n-text" translate>こうかいしませんね？</span>

// 簡略に記載
window.confirm(document.getElementById('confirm-i18n-text').innerText);

~~ngIfの場合は[hidden]と違い、DOMに現れないので基本的には外から見えません。~~
こちら訂正しました。DOMから取得するのでngIFでは動作しない恐れがありますm(__)m

たくさんある場合はi18n文言部分のみ別コンポーネントとして切り出し、includeするとよいでしょう。
切り出し~includeは動作確認していないので、うまく動作しない場合は工夫してみて下さい。

以上です。
御観覧ありがとうございました。

余談ですが、、、
慣れてくると、AngularJSには戻れませんね。
これまでは「npmこわい」「CDNと$scopeがあれば食っていける」とか思っていたこともありましたが、
今では新規にフロントエンドを構築しようと思ったらAngularを選択したい、いやすると思います。