とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

Angular

属性バインディングとプロパティバインディングの違い

Angular のデータバインディングの種類に「属性バインディング」と「プロパティバインディング」があるが明確に違いがわかっていなかったのでメモ 属性バインディングとプロパティバインディングの違い そもそも HTML 属性か DOM プロパティかの違いがある H…

Angular の「構造ディレクティブを書く」を読む

構造ディレクティブとは angular.jp ドキュメントを見ると以下のように定義されている。 構造ディレクティブは HTML のレイアウトを担当します。 それらは、通常は要素を追加、削除、または操作することによって、 DOM の 構造 を構築または再構成します。 …

既存の Angular アプリに Scully を入れてみた

既存の Angular アプリに Scully を入れてみたのでそのメモ github.com Scully とは Angular 用の静的サイトジェネレーター(SSG) 各ページを pre rendering する Node.js v10.x 以上、Angular v9.x 以上が必要(今だと v9 RC を使う必要がある) 導入 インスト…

Angular アプリケーションを Firebase に一瞬でデプロイする

Angular CLI v8.3.0 で導入された ng deploy コマンドで Firebase への deploy を試したメモ。 automatic-deployment-with-the-cli を参考にした。 ng deploy コマンドは 3rd party library を使って様々な Hosting サービスにデプロイができる。今回は @ang…

Angular 9.0.0-next.10 で Ivy のデバッグ機能を試す

AngularConnect の Keynote に Ivy のデバッグ機能の紹介があったので試す (Keynote の 38 分くらいから) 準備 @angular/cli@next で新規アプリケーションを作成 routing の設定と stylesheet format はなんでもよい $ npx @angular/cli@next new sample-app…

Storybook for Angular を IE でも確認できるようにする

問題 Storybook を起動して IE で見ようとすると Object.assign() が見つからずエラーになっていた やったこと ES2015 の仕様に対応していないので Babel を使ってトランスパイル 入れたパッケージ @babel/polyfill · Babel 設定ファイルの変更 お手元の .st…

TypeScript 2.8 系以上で Angular AOT Compiler が失敗する

Angular CLI を v6.0.x 系で TypeScript を v2.8 以上にしてビルドを実行すると以下のエラーが出て、失敗する ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.9.1 was found instead. 現時点では Angular AOT Compiler v6.0.x…

Angular innerHTML で出力している className にスタイルを適用する

問題 innerHTML を使って表示している DOM の className にスタイルを適用できない問題が起きた rendered_body = "<div class="code-frame"><div class="highlight"><pre><span></span>$yarn</pre></div></div>" <div class="content" [innerHTML]="rendered_body"></div> .content { .code-frame { background-color: black; } } 解決策 スタイルに ::ng-deep を使用す…