Angular
概要 今回はAngular+Storybookのaddon-controlsを使用したサンプルです。(2020/6/21時点ではβ版です） addon-controls は＠Input値変更をStorybook上で確認できるようになります。 addon-docsのインストールが必須になります。 Angularでaddon-controlsを使…
概要 今回はStorybookのaddon-actionsを使用したサンプルです。 addon-actions は AngularのOutput時の動作をStorybook上で確認できるようになります。 github.com AngularでのStorybookの設定については以下の記事を参照ください。 kakkoyakakko2.hatenablo…
概要 今回はAngularでStorybookを使用したサンプルです。 Storybookとは Angular、React、Vueなどでコンポーネントを分離して開発するためのツールです。 小さく定義したコンポーネントを一覧化して確認が出来ます。 Addonを追加することで、Storybookに様々…
- Angularをチーム開発で始める時に知っておくとよいことをまとめます。 - 複数案件でAngularを触ってきて、個人的に参考になったものを記載していきます。
概要 Angular 9 のバージョンアップ内容で気になった箇所をピックアップしていきたいと思います。 基本的にはIvyがメインのリリースになります。 blog.angular.io
概要 C#/WPF では INotifyDataErrorInfoとDataAnnotations を使用した入力バリデーションが存在します。今回はそれをAngular版にしてみました。 今回はclass-validator + Angular + TypeScriptで実現します。 INotifyDataErrorInfo実装サンプル github.com
概要 Angular で HttpClient.get メソッド使用時にURLクエリパラメータを配列で渡す場合のサンプルです。 実装方針 HttpParams の生成時に fromObject で配列を指定する。
概要 Angular でルーティン後に自動で別サイトにリダイレクトするサンプルを作成する。 用途 ルーティング後にFormの内容をPOSTして別サイトにリダイレクトしたいケース POSTしたいデータについてをAngular内で取得して設定したいケース 実装方針 テンプレー…
概要 Angularのユニットテストで特定ファイルをカバレッジから除外したいケースがあります。 以下の設定をすることで対応可能です。 angular.json の test の設定に codeCoverageExclude を追加する。 Globs形式でカバレッジ除外対象のファイルを指定する。 …
概要 ng-japan 2019に参加してきました。 ngjapan.org バージョン8.0や次のリリースに含まれる内容などの話しだったり、開発事例の話しがメインでした。 全体的な感想 Cordova関連の話しが色々なセッションで出たけど、ハイブリッドアプリって流行ってるのか…
概要 Angular 8がリリースされましたね。 Ivy はまだPreview機能での提供になります。 いつも通り、気になった箇所をピックアップして紹介していきます。 blog.angular.io github.com
概要 Google Chromeの拡張機能を紹介します。 Angularデバッグ用に使用できるAnguryです。 Chromeウェブストアからインストールすることで使用可能です。 chrome.google.com
概要 Angular の <option> への値設定で通常は value を使用します。 value に値を設定した場合は、変更後の値が文字列で設定されます。 ngValue に値を設定することで、文字列以外の値を扱えるようになります。 angular.io</option>
概要 Angular のComponentテストではクラスをテストする場合とDOMをテストする場合で、TestBed.configureTestingModule の設定方法が変わってきます。 設定方法や使い分けについて記載します。 angular.jp
概要 Angular で Jest を使用してユニットテストを実行するサンプルを作成しました。 jestjs.io github.com
概要 Angular の ngModel 使用時にHTML側で頻繁に touched or dirty の判定を使用するケースがあります。 面倒なので拡張メソッド化してみたいと思います。 基本的には以下の記事と同様に拡張できます。 kakkoyakakko2.hatenablog.com
概要 以前の記事で ngFor の trackBy についての記事を記述しました。 kakkoyakakko2.hatenablog.com TrackByFunction内の this は DefaultIterableDiffer になります。 定義元のコンポーネントを this としたい場合は TrackByFunction を返すメソッドを作成…
概要 Angular で *ngIf と [hidden] の個人的な使い分けを記載します。 基本的には表示・非表示の切り替え頻度が多いものは hidden にしています。 ブラウザの処理速度によっては ngIf だとDOM生成・破棄に時間がかかりレンダリングに影響するケースがあった…
概要 Angular の ngForにはtrackByという設定項目があります。 ngForはtrackByを使用しない場合、コレクションに変更があったら全てのDOMを再生成します。 trackByを使用することで変更箇所のDOMのみ再生成するように設定できます。 再描画が多いngForを使用…
概要 Angular や TypeScript で Array.includes を使用した場合、IE11ではundefinedでエラーになります。 IE11はES5を採用しているため、ES7の Array.includes は対応していない為です。 そのため、IE11でも使いたい場合はpolyfillsの設定が必要になります。…
概要 HTML5 Conference 2018に参加してきました。 今回はWEBのフロント技術の話を中心に聴いてきました。 events.html5j.org 全体的な感想 Angular系のセッションが意外とあった。開発実績からのノウハウ的な話が聴けて良かった。設計パターンまわりは参考に…
概要 Angularの直近バージョンのEOL（End-of-Life, サポート期間終了）スケジュールを箇条書きにしておきます。 1バージョンはアクティブサポート6ヵ月、LTSが12ヵ月の合計18ヵ月サポートされます。 また、半年間隔でメジャーバージョンアップが計画されてい…
概要 Angular CDK 7.0.0で Virtual Scrollingが追加されました。 これは表示されている部分のみDOM要素を生成するものになります。 表示以外の箇所のDOM生成は行わないため、パフォーマンスが向上します。
概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はAngular Language Serviceです。 Angular Supportと同様にHTMLからTypeScriptの定義に飛ぶことが可能です。（TypeScriptからHTMLへ飛ぶことは不可） 基本的にはHTML側の開発サポート…
概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はAngular Supportです。 Angular Language Serviceと重複している箇所がありますが、HTML・TypeScriptの双方から定義に飛ぶことができる拡張機能です。 marketplace.visualstudio.com
概要 Angular 7.0.0がリリースされましたね。 あまり大きな機能追加はありませんが、気になった箇所をピックアップしていきます。 ちなみに次世代レンダリングパイプラインのIvyは含まれていません・・・ blog.angular.io github.com
概要 IE11では<input type="number">を指定しても数値以外の入力が可能です。 今回はDirectiveを使用して数値のみを入力する共通処理を実装したいと思います。
概要 今回はControlValueAccessorを使用した双方向バインディングの実装の仕方を記載します。 通常の双方向バインディングの実装については以下の記事を参照して下さい。 kakkoyakakko2.hatenablog.com
概要 自作コンポーネントで双方向バインディングの実装の仕方を記載します。 ※今回はControlValueAccessorは未使用で実装します。 下記のような設定をします。 自作コンポーネント @Inputでプロパティを定義する。 @OutputでEventEmitterを定義する。EventEm…
概要 Angular 6.1.0になりKeyValuePipeが追加されました。 KeyValuePipeのサンプルを作ってみたいと思います。 以下はAngular 6.1をピックアップした記事です。 kakkoyakakko2.hatenablog.com
