angular

「テキスト入力 -> 自動で検索開始」を実現するための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…

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)メモ

(Angular v.4.3.6を利用) Reactive Formとは Template-driven Formsとの比較 主要4クラス FormGroup, FormArrayを利用した例 フォームの値を変更する フォームの変更を監視する データモデルとフォームモデル バリデーション Reactive Formとは Template-d…

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

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…

AngularのPipe

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

AngularのHttpClientメモ

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

Angularでi18n

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

(WIP) NgUpgradeのドキュメント読む

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

NgModulesのドキュメント読む

前回のスタイルガイドに続き、ドキュメント読んで気になる箇所を抜粋。 NgModules Angular modularity The root AppModule Bootstrapping in main.ts Declare directives and components Service providers Import supporting modules Application-scoped pr…

Angular4スタイルガイド読む

Angular公式のStyle Guideから気になった箇所を抜粋したものです。 Style GuideとNgModulesについての公式ドキュメントを読んだら、実際のアプリを作るときの大枠がある程度整理できました。 ドキュメントはそれなりに長いですが、命名規則など、Angular CLI…

Angular4さわる

これは何か 前提知識 調べたことメモ Angular CLI Autoprefixer 環境変数 IE9, IE10, IE11対応 ビルド SCSS VS Codeエクステンション よかったチュートリアル これは何か 新機能開発をAngular4で作り始めました。その時に調べたことのメモです。 Angular CLI…