4月メモ・リンク集

4 月に調べたことのメモです。 Angular 関連 Angular 6 モーダルの状態を ngrx で管理する ngrx の状態管理を Router (URL) 起点にする Rails 関連 マイグレーション Active Record クエリインターフェイス Active Record コールバック JSのテスト 関連 Dock…

3月メモ・リンク集

3月に調べたことのメモです。 Angular関連 React関連 CircleCI関連 2.0 Docs - CircleCI(オフィシャルドキュメント) Angular対応 その他 Rails関連 Android関連 その他 Angular関連 DESIGN DOC (Ivy): Separate Compilationを読む - らこらこブログ RxJS: …

Rails チュートリアル復習用メモ

以下を参考にした、Rails アプリを作成する手順の覚書です。 Ruby on Rails チュートリアル:実例を使って Rails を学ぼう GitHub - yasslab/sample_apps: Rails チュートリアルの各章が終わった状態を集めたリポジトリです。 モデルとコントローラーの基本…

2月メモ・リンク集

2月に調べたことのメモです。 リサイザー Show More/Less コンポーネント ドラッグアンドドロップ(dnd) Googleスプレッドシート的なスクロール AngularのDIに関して Ruby, Rails関連 VS CodeでRubyを書く その他 リサイザー angular-resizer - StackBlitz …

1月メモ・リンク集

1月に調べたことのメモです。 Angular関連 Date系ライブラリとIANA 複数のプロジェクタで共有したいロジックとコンポーネントをパッケージ化した 必要な前提知識 ReactのHOCs その他 Angular関連 AngularのCDK Tableのコードを読みながら、Viewの組み立て方…

AngularのCDK Tableのコードを読みながら、Viewの組み立て方について調べる

CDK Tableのドキュメント 0: 完成版 1: コンポーネントを動的にaddする 2: 対象のコンポーネント内にaddする 3: コンポーネントのaddからテンプレートを取得してaddする方式に変更 4: table.ts, row.ts, cell.tsを用意 5: 行定義を追加(RowDef) 6: ヘッダ…

12月メモ・リンク集

12月に調べたことのメモです。 Angular関連 View作成や再利用について Form関連 Dateライブラリ VSCode コードフォーマット Go環境用意 Reactチュートリアル Tutorial その他 Google Analytics コンポーネントを設計するときに Angular関連 View作成や再利用…

moment -> Luxon

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

Parcelを利用してReact × Typescriptの環境を用意

ちょっとしたモック作成や動作確認をしたいときに使ってみようかと思います。 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を利用) ローディン…

(WIP) createEmbeddedViewとcreateComponen

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

ControlValueAccessorでRadioボタンを含むコンポーネントを実装するメモ

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

11月メモ・リンク集

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

AngularのForm(応用)

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

10月メモ・リンク集

これは何か 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操作 フォーム …

Observable.throw()が返すオブジェクトの型はErrorObservable

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>…

「テキスト入力 -> 自動で検索開始」を実現するためのRx使い方

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

9月リンク集

これは何か 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…

Angular (4)で設定したLocale IDを取得

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) に

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

AngularのTemplate Syntax

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

AngularのForm(Reactive Forms)メモ

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

AngularのForm(Template-driven Forms)メモ

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

Angular Routerメモ

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

Angular CLIでビルドされたファイルの容量を把握する

把握 --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 容量の把…

RxJSの各種オペレーターなどをimportする場合

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

Angular CLIでメインアプリとは別にページ(html)を用意する

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

AngularのDatePipeのlocaleを変更したい場合(タイムゾーンを変更したい場合、も)

(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のPipe

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