Web備忘録 プログラミングを中心に技術的な事柄を忘れないように書き残します。
Angular で Storybook を使いたい Angular で作られているプロジェクトに、Storybook を導入する手順をまとめます。 Storybook for Angular 上記ページの手順に従えばOKです。 Storybook とは Storybook とは UIコンポーネントのカタログを作るためのツールです。各コンポーネントの状態に応じた表示が確認できるようになります。 アプ […]
Angular でサーバーサイドレンダリング Angular でサーバーサイドレンダリングを行う方法をまとめます。 基本 この記事 を参考にしていますが、うまくいかない個所もあったので、備忘録がてらやり方をまとめておきます。やり方も少しだけかえています。 Firebase を使ってサービスを構築する予定だったので、サーバーサイドには Firebase Cloud Functions を利用します。 […]
結論 先に結論を書きます。 タグ属性なしでバインド -> innerHTML 属性にバインド タグ属性含めてバインド -> DomSanitizer.bypassSecurityTrustHtml() を使う 1. Angular では HTMLタグがエスケープされてバインドされる セキュリティの都合で、Angularのバインド機能を使って動的に文字列を表示する際は、必ずエスケープされ […]
Angular と Firebase Angular も Firebase も Google が提供する人気のライブラリ・サービスです。 Angular の開発で Firebase をバックエンドに用いる場合、Firebaseのライブラリをそのまま使うのではなく、Angularから利用するFirebaseに特化した AngularFire というライブラリを使います。 GitHub – […]
Firebase UI とは Firebase で 認証処理を実装する場合、Authentication という機能を使います。自分でライブラリ空手帰郷される各機能と独自に作成するUI(HTML)を用いて実装する方法のほか、Firebase UI という Firebase で用意されているUIを利用する方法があります。 firebase入門 ユーザー認証を行う方法まとめ │ Web備忘録 上記記事 […]
Angular と Firebase Angular も Firebase も Google が提供する人気のライブラリ・サービスです。 Angular の開発で Firebase をバックエンドに用いる場合、Firebaseのライブラリをそのまま使うのではなく、Angularから利用するFirebaseに特化した AngularFire というライブラリを使います。 GitHub – […]
複数の要素をラップする空のダミー要素を作りたい Angular では ng-container というコンポーネントを使うことで、HTMLにレンダリングされない要素を書くことができます。これを使うことで、複数の要素をにラップするコンテナを疑似的に作ることができます。 React(JSX)でいうと <React.Fragment> みたいなものです。 例えば、繰り返し ngFor で複数 […]
コンポーネントを任意のタイミングで再描画したい AngularでWebアプリを開発中、コンポーネントをある特定のタイミングで再描画したいという状況があったので、その方法を調べたのでメモしておきます。 例えば非同期処理でのバインドデータ更新など、データが変わっても変更検知をしてくれない時があったりします。 ChangeDetectorRef ChangeDetectorRef を使うことで、任意のタ […]
