Momentと比較してみて 気に入ったところ なるほどと思ったところ その他のmomentとの違い 準備 型定義ファイル インポート 基本的な書き方 作成 変更 出力 日本語にする タイムゾーンの変更 今後の懸念 デモ Refs Refs Momentと比較してみて 使ってみて1週間…

ちょっとしたモック作成や動作確認をしたいときに使ってみようかと思います。 Parcel v1.2.0を利用。 準備 Parcelをインストール npm install -g parcel-bundler tsconfig.jsonを用意 { "compilerOptions": { "target": "es5", "module": "commonjs", "stric…

ローディング ローダーの種類 Aの実装方針 actionとstate stateをsubscribe Bの実装方針 利用例 stateをsubscribe BlockerComponent 通信エラー 実装方針 利用例 Angularアプリのローダーと通信時エラーの実装について。 （Angular 5.0.1を利用） ローディン…

templateを利用して動的にコンポーネントを生成する ViewContainerRef TemplateRef EmbeddedViewRef サンプル 参考 templateを利用して動的にコンポーネントを生成する this.viewContainer.createEmbeddedView(this.templateRef); 何が起きているか Angular…

(change)を利用 ViewChildrenを利用 ref.nativeElement.checked = true;でViewを更新 RadioComponent import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angula…

11月に調べたことのメモです。 ngrx関連 各Feature Module（Page Module）のステートを、画面遷移時にリセットする Angular関連 Component/Directive関連 アプリケーションに依存するデータを表示するコンポーネントのインターフェース（@Input）について Fo…

これは何か Custom Form Controls NG_VALUE_ACCESSORを利用する NgControlを利用する サンプルコード メモ フォームの入れ子 ControlValueAccessorを利用 Template-driven専用 Reactive専用 サンプルコード メモ Error Aggregator サンプルコード 参考 メモ …

これは何か ngrx関連 ngrxとフォーム Introducing @ngrx/entity – @ngrx – Medium 状態のリセット How to share state between reducers best practice · Issue #159 · ngrx/example-app · GitHub Rx関連 unsubscribe その他 Angular関連 view操作 フォーム …

import { Observable } from 'rxjs/Observable'; import { ErrorObservable } from 'rxjs/Observable/ErrorObservable'; // ... handleError(err): Observable<any>| ErrorObservable { if (/* 何か */) { return Observable.of('ok'); } else { return Observabl</any>…

example-app/book.ts at ee0f331bf808525e003efa264b5065964c7f942b · ngrx/example-app · GitHub 元ネタ（NgRx4のサンプルアプリより） シュミレート用サンプルコード テキスト入力の代わりに、画面クリックで一連の流れが確認できる簡易版コードです。 ブ…

これは何か NgRx, アプリケーションの状態管理 A Comprehensive Introduction to @ngrx/store - Companion to Egghead.io Series Using NgRx 4 to Manage State in Angular Applications NgRx: Patterns and Techniques – nrwl platform/README.md at master…

LOCALE_IDを利用。 以下のようにAOTでコンパイルしていない場合、初期値のen-USになります。 ng serve --aot --locale ja import { Component, OnInit, LOCALE_ID, Injector } from '@angular/core'; export class FooComponent implements OnInit { constru…

プログラムに関する備忘録をこのブログに書いていましたが、それくらいの文章やコードならGistにあげればいいのかと思い始めました。 Leptonというアプリがあるのでしばらくそれを使ってみようかと思います。 Lepton - A Lean GitHub Gist Client Quiver、Sn…

Angular - Template Syntaxを読んだメモです。 （v4.3.6対応） Binding一覧 参考 Operator一覧 参考 Built-in attribute directives ngClass ngStyle ngModel Two-way *ngForのtrackByを使って描画対象かどうかを判断する Template reference variables ( #v…

ryotah.hatenablog.com 別記事でこんなのも書きました。 （Angular v.4.3.6を利用） Reactive Formとは Template-driven Formsとの比較 主要4クラス FormGroup, FormArrayを利用した例 フォームの値を変更する フォームの変更を監視する データモデルとフォ…

（Angular v.4.3.6を利用） <select>を利用する NgFormとは ngModelとname属性 NgModelインスタンスを取得 参考 バリデーション <input>関連その他 参考 <input>操作時のイベントを取得したい キーイベントをフィルタリングしたい <select>を利用する *ngForを利用する AngularJSのng-optio</select></select>…

（Angular v.4.3.6を利用） 参考 リンクを設定したい 通常 パラメータがついたリンク アンカー(#)がついたリンク アクティブなリンクにクラスを設定したい ts内で遷移の制御をしたい 通常 パラメータをつける アンカー(#)をつける クエリを保存して遷移した…

把握 --stats-jsonオプションを有効にしてstats.jsonを出力 ng build --prod --stats-json https://github.com/angular/angular-cli/wiki/build webpack-bundle-analyzerを利用 https://github.com/th0r/webpack-bundle-analyzer –build-optimizer 容量の把…

全部をimportしない // 禁止 import 'rxjs/Rx'; ライブラリ全体が読み込まれてしまいます。 TSLintでエラーが出るようにしておくと安全です。 Rule: import-blacklist "import-blacklist": [ true, "rxjs", "rxjs/Rx", ] import用のファイルを用意する rxjs-…

stories asset configuration · angular/angular-cli Wiki · GitHub assetsに、対象のhtmlかそれを含むディレクトリを設定する。 "assets": [ "assets", "favicon.ico", "static/test.html" ] これでhttp://localhost:4200/static/test.htmlが利用できる。 …

（Angular v.4.3.6を利用） 起動時にlocaleを設定 (JIT) 動的にlocaleを変更 タイムゾーンを変更 参考Url 起動時にlocaleを設定 (JIT) LOCALE_IDを設定 DatePipe error when using `navigator.language` as LOCALE_ID with aot · Issue #6618 · angular/angu…

生成の流れ 対象月の日数を調べる カレンダー上で、1日の前に何日（何マス）あるか カレンダー上で、最終日の後ろに何日（何マス）あるか カレンダーに表示される日数を調べる 前月、翌月も含んだ数 日数分の配列を生成 chunkする 最終的に[Array(7), Array(…

（Angular v.4.3.6を利用） これは何か 概要 Built-in カスタムパイプ Change detection 上記のような場合の対応策 Impure pipes AsyncPipe ServiceやComponent内でも利用したい DatePipeのlocaleを変更したい場合 その他 これは何か Angular (4+)を始めたの…

（Angular v.4.3.6を利用） 参考 データを取得する レスポンスデータの詳細を見る retry データを送信する Headersを追加 URL Parametersを追加 進捗を確認 応用 Interceptorを利用してヘッダーを追加 Interceptorを利用してログを表示 Interceptorを利用し…

# リモートのブランチを表示 git branch --remote # リモートに存在しない（削除された）ブランチを削除 git fetch --prune

（Angular v.4.3.6を利用） 準備 翻訳対象(HTMLのタグ)にi18n属性を設定 要素を追加しない方法 属性値を翻訳 複数形、代替テキスト ファイル（XLIFF）の書き出し XLIFFファイルについて Serve Build Report missing translations 参考 Angular CLI環境でアプ…

読んだドキュメント NgUpgrade in Depth – nrwl Victor Savkinによる記事。3部構成で仕組みとベストプラクティスについて説明。 こっちを読んでから公式ドキュメントに目を通した方がわかりやすいかも Angular - Upgrading from AngularJS 公式ドキュメント …

ライブラリやレスポンスデータの関係で対応が難しい場合や、他環境にあったファイルを一旦そのまま利用したい場合などに。 https://palantir.github.io/tslint/usage/rule-flags/ // ファイル全体に以下設定を反映 /* tslint:disable:no-null-keyword */ // …

これは何か 基本 レシピ legendを外したい (c-1) 高さを変更したい (c-1) crosshair(照準線)を表示 (c-1) タイトルを非表示にする (c-2) Axisを非表示にする (c-2) どのAxisタイプを利用すべきか Axisに日付を利用したい Axisのタイプにdatetimeを設定 (c-3,…

こんな感じでコンテンツを左右(上下)に配置する時に便利。 以下のような問題（仕様）があるので、Flexboxを入れ子にした場合かつ、上下揃えをした場合は注意が必要。 css - Chrome / Safari not filling 100% height of flex parent - Stack Overflow キャプ…